這是我第一次發佈問題,所以我希望這是根據規則編寫的。如何在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。
任何幫助將不勝感激。
預先感謝您。