Как изменить цвет гистограммы на гистограмме углового графика и диаграммы с несколькими наборами данных? - PullRequest
Новая
       36

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

0 голосов
/ 31 января 2019

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

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

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

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

1 Ответ

0 голосов
/ 31 января 2019

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