Как изменить стиль HTML в ChartOption с условием if?

Question

Я использую Chart.js для рисования графиков на своем сайте. Проблема в том, что мне нужно изменить стиль в данных графа, если значение данных равно 0.

Для примера. У меня есть массив (array1), который имеет следующие данные: 0; 0; 0,125; 0; 0; 0;

Так что это отображение будет общаться так:

код, который генерирует стиль, как это:

function MoreChartOptions(){} 
     var ChartData = { 
     labels : labelsArray, 
     datasets : [{ 
      fillColor : "rgba(52,152,219,1)", 
      strokeColor : "rgba(52,152,219,0.5)", 
      pointColor : "rgba(52,152,219,1)", 
      markerShape :"circle", 
      pointStrokeColor : "rgba(255,255,255,1.00)", 
      data : array1, 
      }, 
     ]}; 
ChartOptions= {canvasBackgroundColor:'rgba(255,255,255,1.00)',spaceLeft:12,spaceRight:12,spaceTop:12, ... 

Мой вопрос: Как изменить (если это возможно) Стиль ChartOptions (размер шрифта - inGraphDataFontSize: 12), если значение данных диаграммы равно 0?

меня попробовать это, но он не работает:

ChartOptions= 
{canvasBackgroundColor:'rgba(255,255,255,1.00)', ... 
..., 
for(a=0;a<array1.length;a++){array1[a] != 0 ? inGraphDataFontSize:12 : inGraphDataFontSize:5}, ... 

НАСТОЯЩЕМУ спасибо за помощь.

Answer 1

Когда вы создаете диаграмму с помощью своего оператора new Chart(....), вы возвращаете объект диаграммы, который можно манипулировать и обновлять (используя функцию update()).

Так, например, если вы хотите, чтобы значение 0 баров быть красным, вы можете сделать что-то вроде этого:

var myBarChart = new Chart(document.getElementById("myChart").getContext("2d")).Bar(ChartData, ChartOptions); 

for (var key in myBarChart.datasets[0].bars) { 
    if (myBarChart.datasets[0].bars[key].value == 0) { 
     // Change 2nd bar to red (display). 
     myBarChart.datasets[0].bars[key].fillColor = "rgba(255,0,0,0.7)"; 
     myBarChart.datasets[0].bars[key].strokeColor = "rgba(255,0,0,1)"; 
     // Change 2nd bar to red (highlight setting on mouse over) 
     myBarChart.datasets[0].bars[key].highlightFill = "rgba(212,10,10,0.7)"; 
     myBarChart.datasets[0].bars[key].highlightStroke = "rgba(212,10,10,1)"; 
    } 
} 

myBarChart.update(); 

You can see what it looks like in a jsfiddle here.