Height for chart area (not the canvas size)?

时间:2017-10-12 09:58:30

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

Since GitHub is telling me "DO NOT create issues for questions or support requests." and doesn't mention another place to ask a question, I guess this is the place?

If I want to set a specific size for the charts (but not the overall size of the canvas), anyone knows if that is possible to do? My reason is my X Axis labels can get really long, and when that happens, I simply increase the canvas size, but that obviously changes the whole size entirely. So I would like to set separate sizes for the chart area and the x axis label area...

1 个答案:

答案 0 :(得分:0)

使用ChartJS

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

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

width: 430px; height: 215px;

大标签

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

enter image description here

使用小标签

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

enter image description here

<强> 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%
  }