Как изменить цвет столбца на угловой диаграмме и диаграмме js гистограммы с несколькими наборами данных?

Я могу установить цвета для обоих наборов данных (расчетное время по сравнению с фактическим затраченным временем) с размером массива 2, который устанавливает все полосы для каждого набора как назначенные цвета.

Мне нужно изменить цвет полосы для одной из полос в одном из наборов, если значение фактического затраченного времени превышает расчетное время, затраченное на эту дату (метка).

Это приложение angularjs, и я импортировал angular-chart и chartjs. Я пытался использовать наборы данных (как в chartjs) для данных и устанавливать цвета для каждой позиции в области, но это не отображается. Я также попытался использовать атрибут chart-dataset-override в теге холста, но я не знаю, как исправить конкретную панель данных (например, data [1] [2]).

Примечание: все элементы полосы в цветах данных [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 (дней в неделе).


chart.js angularjs angular-chart
person Joseph Campbell    schedule 31.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось решить свою проблему с помощью атрибута 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"
                            ]
                        
                        }];

person Joseph Campbell    schedule 31.01.2019