2017-06-02 84 views
-1

這是我第一次發佈問題,所以我希望這是根據規則編寫的。如何在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

任何幫助將不勝感激。

預先感謝您。

回答

1

我找到了解決方案。如果有人遇到同樣的問題,我會在這裏留下問題的答案。

它不工作,因爲我沒有設置選項responsive:false,所以圖表調整爲數據大小。

無論如何謝謝你。