Javascript 如何使用if条件更改ChartOption中的HTML样式?
我正在使用Chart.js在我的站点中绘制图形。问题是,若数据的值为0,我需要更改图内数据的样式 例如,我有一个数组(array1),其中包含以下数据: 0; 0; 0.125; 0; 0; 0; 因此,这将显示如下聊天:Javascript 如何使用if条件更改ChartOption中的HTML样式?,javascript,styles,chart.js,Javascript,Styles,Chart.js,我正在使用Chart.js在我的站点中绘制图形。问题是,若数据的值为0,我需要更改图内数据的样式 例如,我有一个数组(array1),其中包含以下数据: 0; 0; 0.125; 0; 0; 0; 因此,这将显示如下聊天: function MoreChartOptions(){} var ChartData = { labels : labelsArray, datasets : [{ fillColor : "rgba
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, ...
生成样式的代码如下所示:
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, ...
我的问题是:如果图表数据的值为0,如何更改(如果可能)图表选项样式(字体大小-inGraphDataFontSize:12)
我尝试过这个,但不起作用:
ChartOptions=
{canvasBackgroundColor:'rgba(255,255,255,1.00)', ...
...,
for(a=0;a<array1.length;a++){array1[a] != 0 ? inGraphDataFontSize:12 : inGraphDataFontSize:5}, ...
图表选项=
{画布背景颜色:'rgba(255255,1.00)。。。
...,
对于(a=0;a当您使用新图表(…)
语句创建图表时,您将返回一个图表对象,您可以对其进行操作和刷新(使用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();
调试器显示的错误是:“未捕获的语法错误:意外标记(“它在所有选项下划线”)