时间戳

首页 > 解决方案 > 如何更改具有多个数据集的角度图表和图表 js 条形图上的条形颜色？

angularjs - 如何更改具有多个数据集的角度图表和图表 js 条形图上的条形颜色？

问题描述

我可以设置两个数据集的颜色（估计时间与实际花费的时间），数组长度大小为 2，将每个集合的所有条设置为指定颜色。

如果值是实际花费的时间高于该给定日期（标签）花费的估计时间，我需要更改其中一组中的一个条的条颜色。

这是一个 angularjs 应用程序，我已经导入了 angular-chart 和 chartjs。我试图为数据获取使用过的数据集（如在 chartjs 中）并为该区域中的每个位置设置颜色，但这不会显示。我还尝试在 canvas 标签上使用 chart-dataset-override 属性，但我不知道如何覆盖特定的数据栏（即 data[1][2]）。

注意：data[0]（估计值）中的所有条形项目颜色都不会改变。如果值大于估计时间数据集中同一位置的值，则 data[1] 中列出的条形项只会从默认颜色更改。

        	techid.chartseries = ['Predicted', 'Actual'];
                	techid.chartlabels = ["9/24", "9/25", "9/26","9/27", "9/28","9/29","9/30"];
                	techid.chartdata = [
                	    [65, 59, 80, 81, 56, 55, 40],
                	    [28, 48, 40, 19, 86, 27, 90]
                	  ];

                	techid.chartcolours= [
                        {
                            backgroundColor: '#D7D7D7',
                            borderColor: '#D7D7D7',
                            hoverBackgroundColor: '#D7D7D7',
                            hoverBorderColor: '#D7D7D7'
                        },
                        {
                            backgroundColor: '#0169B4',
                            borderColor: '#0169B4',
                            hoverBackgroundColor: '#0169B4',
                            hoverBorderColor: '#0169B4'
                        }
                    ];
                	
               
                	techid.chartoptions ={
                			 scales: {
                				    yAxes: [{
                				      scaleLabel: {
                				        display: true,
                				        labelString: 'Mintues'
                				      }
                				    }],
                				    xAxes: [{
                  				      scaleLabel: {
                  				        display: true,
                  				        labelString: 'Date'
                  				      }
                  				    }]
                				  }
                	};
                	
                	
<canvas id="bar" class="chart chart-bar" 
	            	 chart-data="pc.data.chartdata" 
	            	 chart-labels="pc.data.chartlabels" 
	            	 chart-series="pc.data.chartseries" 
	            	 chart-colors="pc.data.chartcolours" 
	            	 chart-options="pc.data.chartoptions">
	            	 </canvas>

我想更改特定日期的特定日期的条形之一的颜色。

当使用 2 种颜色创建颜色数组时，我无法在数据集中操作条形颜色，但数据集的长度为 7（一周中的天数。）

标签： angularjschart.jsangular-chart

解决方案

我能够使用 chart-dataset-override 属性解决我的问题。我更新了数组的颜色设置。在下面的示例中，我只是用红色覆盖了颜色。

我计划循环遍历数组并根据条件为真设置值。

techid.datasetOverride = [
                        {
                            fill: true,
                            backgroundColor: [
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7"
                           
                            ]
                        },
                        {
                            fill: true,
                            backgroundColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            hoverBackgroundColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            borderColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            hoverBorderColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ]
                        
                        }];

推荐阅读