Question

这是我第一次发帖提问，所以我希望这是根据规则写的。

所以，我使用Chart.js来创建有关车队的效率图表。我通过AJAX获取了我需要的值（向PHP文件发出请求并访问数据库（PostgreSQL））。

然后，通过javascript我创建图表（参见下面的代码）。

我的问题出现在我设置宽度和高度值的第一行代码中，但它们不适用于画布。我尝试通过style属性或通过width和height属性来完成它，但都不起作用。

我还尝试在执行函数后通过jQuery更改这些参数，但这也不起作用。

＆＃13;

$("#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();
}

＆＃13;

<div id="info_content"></div>

＆＃13;

我还试图在Chrome上使用Javascript控制台更改值并且它已经工作（只有在更改了style属性，更改宽度或高度属性时才会删除画布）。我真的不明白。

我认为问题在于我是动态创建画布，但如果问题是我没有看到答案（也许在原始HTML中添加画布并显示：没有，但我真的不想那样做。）

Here是我在页面中显示的内容，正如您所看到的，有3个图表，我只能看到2个没有滚动。

奇怪的是，当我打开Chrome Javascript控制台时，我得到了我想要的显示器。 Here is the view with the console open

非常感谢任何帮助。

提前谢谢。

Answer 1

我找到了解决方案。如果有人遇到同样的问题，我会在这里留下问题的答案。

它没有用，因为我没有设置选项responsive:false，所以图表正在调整到数据的大小。

无论如何，谢谢你。

如何在Chart.js上为Canvas设置固定大小

1 个答案: