Question

我能够设置颜色两个数据集（估计时间与实际花费的时间），与点阵列长度尺寸2，即所有组的每个组的指定颜色的条。

我需要改变指示条的颜色为所述集合中的一个的杆之一如果该值是实际花费的时间比花在该给定日期（标签）估计时间更高。

这是一个angularjs应用程序，我已经导入了angular-chart和chartjs。我试图获取用于数据的二手数据集（如chartjs中所示）并为该区域中的每个位置设置颜色，但这不会显示。我也试图在画布上的标签使用的图表，数据集-override属性，但我不知道如何在右侧的特定数据栏（即数据[1] [2]）。

注意：data [0]（估计值）颜色中的所有条形项目均不会更改。如果数据[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长度（在一周天）。

Answer 1

我能够使用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"
                            ]
                        
                        }];

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

1 个答案: