2017-06-02 142 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,所以图表调整为数据大小。

无论如何谢谢你。