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

Question

我能够为两个数据集设置颜色（估计时间与实际花费时间），数组长度为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种颜色创建colors数组时，无法处理数据集中的条形颜色，但数据集的长度为7（一周中的天数）。

Answer 1

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

我计划for遍历数组，并根据条件为true设置值。

 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" ] }];