我正在使用带有asp.net mvc5的chart.js。我的图表工作正常,但顶部数字的标签显示不清楚。 任何idiea我必须做什么?
这是我的画布代码
<div style="height:300px !important; width:400px !important; display:inline-block !important;">
<label for="chart1">
Prozent <br />
</label>
<canvas id="myChart1" width="400" height="400"></canvas>
</div>
这是图表选项
options: {
//animation:false,
responsive: false,
responsiveAnimationDuration: 0,
scaleLineColor: "red",
scales: {
yAxes: [{
ticks: {
suggestedMin: minNum(getData2),
suggestedMax: maxNum(getData2),
beginAtZero: true,
fontSize: 12,
fontColor: "#000000",
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return value;
}
}
},
gridLines: {
show: true,
}
}],
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
fontSize: 16,
fontColor: "#000000",
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return value;
}
}
},
gridLines: {
display:false
}
}]
},
legend: {
display: false,
},
tooltips : {
enabled: false
},
animation: {
duration: 0,
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 3);
}
}
});
}
}
}
});