图表区域的高度（不是画布大小）？答案

【问题标题】：Height for chart area (not the canvas size)?图表区域的高度（不是画布大小）？
【发布时间】：2017-10-12 09:58:29
【问题描述】：

因为 GitHub 告诉我“不要为问题或支持请求创建问题”。又不提另一个地方提问，估计就是这个地方吧？

如果我想为图表设置特定大小（但不是画布的整体大小），有人知道这是否可行吗？我的原因是我的 X 轴标签可能会变得很长，当这种情况发生时，我只是增加了画布大小，但这显然会完全改变整个大小。所以我想为图表区域和x轴标签区域分别设置大小...

【问题讨论】：

标签： chart.js vue-chartjs chartjs-2.6.0

【解决方案1】：

使用 ChartJS

当您的标签自动变小时，标签会如图所示垂直对齐

小尺寸和大尺寸标签画布都在消耗我相同的高度和宽度

width: 430px; height: 215px;

大标签

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

带小标签

$scope.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

HTML

<div class="col-md-4">
  <div style="height:auto; width:auto;">
        <div ng-controller="LinemsoVersionCtrl">
          <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
        </div>
</div>
</div>

CSS

  .col-md-4 {
    width: 33.33333333%
  }

【讨论】：

这对某些人来说是一种解决方法，但在我的情况下，标签不仅仅是一年中的一个月，因此不可能缩短它们。
是的，但我觉得你可以使用 CSS 轻松处理高度和宽度，而不依赖于 chartjs API