Question

我正在尝试编辑图表，但我不能。我想将画布高度更改为固定高度。图表始终以1156px X 867开始。我还需要更改每个柱的高度。

那么，如何更改画布的大小以及如何更改每个条的高度。我有这段代码：

var ctx = document.getElementById("chart");
          var myChart = new Chart(ctx, {
              type: 'horizontalBar',
              data: {
                  labels: data['labels'],
                  datasets: [{
                      label: '# of Votes',
                      data: [12, 19, 3, 5, 2, 3],
                      backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                          'rgba(255, 159, 64, 0.2)'
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)',
                          'rgba(255, 206, 86, 1)',
                          'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)'
                      ],
                      borderWidth: 1
                  }]
              },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }]
                  }
              }
          });

HTML：

<canvas id="chartMentes" width="400" height="300"></canvas>

Answer 1

如何更改画布大小？

通常，ChartJS以响应方式显示图表，这意味着它不会考虑画布的宽度和高度（由用户设置）。

要解决此问题，您需要在图表选项中将responsive属性设置为false，如此...

options: {
  responsive: false,
  ...
}

现在，您可以根据需要设置canvas 的宽度和高度。

<canvas id="chartMentes" width="400" height="800"></canvas>

如何更改每个条的高度？

您可以通过在图表选项中相应地为y轴设置barThickness属性来更改每个柱的高度，如此...

options: {
    scales: {
      yAxes: [{
            barThickness: 10,  //set that suits the best
            ...
}

<强>ᴅᴇᴍᴏ

var ctx = document.getElementById("chartMentes").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
            	'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'],
            borderColor: [
            	'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        scales: {
            yAxes: [{
                barThickness: 10,
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chartMentes" width="300" height="200"></canvas>

图表js - 自定义图表

1 个答案: