这是我第一次发布问题,所以我希望这是根据规则编写的。如何在Chart.js上为Canvas设置固定尺寸
因此,我使用Chart.js来创建关于车队的效率图表。我通过AJAX获取我需要的值(向PHP文件发出请求并访问数据库(PostgreSQL))。
然后,通过JavaScript创建图表(请参阅下面的代码)。
我的问题是在代码的第一行中,我设置宽度和高度值,但它们不应用于画布。我试过通过style属性或通过宽度和高度属性来完成它,但都不起作用。
我也试图通过jQuery更改这些参数后,该函数执行,但也没有工作。
$("#info_content").html("<canvas id=chartdiv0 style='width:600px;height:150px'></canvas><canvas id=chartdiv1 width='600' height='150'></canvas><canvas id=chartdiv2 width='600' height='150'></canvas>");
//If fuel is selected
if(imei[1]=='comb')
c=3;
//If Kilometers is selected
if(imei[1]=='km')
{
c=1;
tituloefi[0]="Kilometros Precorridos";
}
for(var i=0;i<c;i++)
{
var ctx = document.getElementById("chartdiv"+i).getContext('2d');
for(var k=0;k<datajson[i].length;k++)
datajson[i][k]['valor']=datajson[i][k]['valor']/h[i];
datajson[i].reverse();
if(datajson[i][0]==undefined)
{
$("#chartdiv"+i).remove();
continue;
}
//Values are being generated by getting a database value and adding a random value
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [datajson[i][0]['data'], datajson[i][1]['data'], datajson[i][2]['data'], datajson[i][3]['data'], datajson[i][4]['data'], datajson[i][5]['data'],datajson[i][6]['data']],
datasets: [{
label: false,
data: [datajson[i][0]['valor'], (datajson[i][1]['valor']+Math.random()*40000), datajson[i][2]['valor']+Math.random()*40000, datajson[i][3]['valor']+Math.random()*40000, datajson[i][4]['valor']+Math.random()*40000, datajson[i][5]['valor']+Math.random()*40000,datajson[i][6]['valor']+Math.random()*40000],
backgroundColor: [
'rgb(61, 135, 255)'
],
borderColor: [
'rgb(0, 74, 196)'
],
borderWidth: 3
}]
},
options: {
title: {display:true,text:tituloefi[i],fontSize:20},
legend: {display:false},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
tooltips: {
displayColors:false,
callbacks: {
label: function(tooltipItem, chart) {
return "Média: "+Math.round(tooltipItem.yLabel*100)/100+(c==1?" Km":" Litros");
}
}
}
}
});
}
if(c==1)
{
$("#chartdiv1").remove();
$("#chartdiv2").remove();
}
<div id="info_content"></div>
我也试图改变与Chrome的JavaScript控制台价值和它的工作(这只有更改的样式属性,改变宽度或高度属性工作擦除画布)。我真的不明白。
我认为问题在于我正在动态创建画布,但是如果这是问题,我没有看到答案(也许在原始HTML中添加画布时显示:无,但我真的没有,不想这样做)。
Here就是我在页面中显示的内容,正如您所看到的那样,有3个图表,我只能看到2个没有滚动的图表。
奇怪的是,当我打开Chrome Javascript控制台时,我得到了我想要的显示。 Here is the view with the console open。
任何帮助将不胜感激。
预先感谢您。