响应式 Chart.js Canvas 条形图高度？答案

【问题标题】：Responsive Chart.js Canvas barplot height?响应式 Chart.js Canvas 条形图高度？
【发布时间】：2020-01-13 12:39:32
【问题描述】：

我在正确设置 Chart.js 条形图的高度时遇到了困难（见屏幕截图）。

responsive:true,
maintainAspectRatio: false,

这里似乎没有考虑到。我期望地块高度占据盒子的 100%。

任何人都可以提供建议，因为我环顾四周，并没有真正找到太多。

<div class="col-md-4" style="flex-direction: inherit">
  <div class="box box-primary">
    <div class="box-header with-border">
      <i class="fa fa-line-chart"></i>
      <h3 class="box-title">dataset growth</h3>
    </div>
    <div id="boby" class="box-body">
      <div class="chart-container" style="position: relative">
        <div class="chart">
          <canvas id="barChart" width="100%" height="100%"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- page script -->
<script>
  var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  var dataHsap = [395, 2829, 6498];
  var dataAtha = [0, 0, 1272];
  var dates = ["2015", "2018", "2020"];

  var bar_ctx = document.getElementById('barChart');
  var boby = document.getElementById('boby');
  var data = {
    labels: dates,
    datasets: [{
        label: 'Human',
        data: dataHsap,
        backgroundColor: "#3c8dbc",
        hoverBackgroundColor: "#77b2d4",
        hoverBorderWidth: 0
      },
      {
        label: 'Thaliana',
        data: dataAtha,
        backgroundColor: "#00a65a",
        hoverBackgroundColor: "#00cc70",
        hoverBorderWidth: 0
      },
    ]
  };

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
      duration: 10,
    },
    tooltips: {
      mode: 'label',
      callbacks: {
        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
        }
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false
        },
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          callback: function(value) {
            return numberWithCommas(value);
          },
        },
      }],
    },
    legend: {
      display: true
    }
  };

  var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: data,
    options: options
  });
</script>
<div class="col-md-4" style="flex-direction: inherit">
  <div class="box box-primary">
    <div class="box-header with-border">
      <i class="fa fa-line-chart"></i>
      <h3 class="box-title">ReMap dataset growth</h3>
    </div>
    <div id="boby" class="box-body">
      <div class="chart-container" style="position: relative">
        <div class="chart">
          <canvas id="barChart" width="100%" height="100%"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- page script -->
<script>
  var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  var dataHsap = [395, 2829, 6498];
  var dataAtha = [0, 0, 1272];
  var dates = ["2015", "2018", "2020"];

  var bar_ctx = document.getElementById('barChart');
  var boby = document.getElementById('boby');
  var data = {
    labels: dates,
    datasets: [{
        label: 'Human',
        data: dataHsap,
        backgroundColor: "#3c8dbc",
        hoverBackgroundColor: "#77b2d4",
        hoverBorderWidth: 0
      },
      {
        label: 'Thaliana',
        data: dataAtha,
        backgroundColor: "#00a65a",
        hoverBackgroundColor: "#00cc70",
        hoverBorderWidth: 0
      },
    ]
  };

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
      duration: 10,
    },
    tooltips: {
      mode: 'label',
      callbacks: {
        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
        }
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false
        },
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          callback: function(value) {
            return numberWithCommas(value);
          },
        },
      }],
    },
    legend: {
      display: true
    }
  };

  var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: data,
    options: options
  });
</script>

【问题讨论】：

responsive:true, maintainAspectRatio: true, 有什么问题？您想要实现什么，（如何）它应该缩放还是应该具有特定的宽度/高度？
嗯，我希望情节缩放到盒子，但它没有。
删除两行“responsive:true, maintainAspectRatio: true”似乎可以改善缩放问题。不完美，因为纵横比保持不变，情节仍然很害怕
responsive & maintainAspectRatio 默认为true，删除不应该改变任何东西。

标签： javascript canvas chart.js height bar-chart

【解决方案1】：

您的图表不知道它应该有多大。您应该向包含您的画布的 div 添加一个高度属性。

<div class="chart" style="height: 300px">
  <canvas id="barChart" width="100%" height="100%"></canvas>
</div>

【讨论】：

我希望这是你想要的。我仍然不确定您想要什么，图表/画布/div 应该如何在两个维度上缩放。