调整 vue-chartjs 高度，同时保持响应答案

【问题标题】：Resizing vue-chartjs height while keeping it responsive调整 vue-chartjs 高度，同时保持响应
【发布时间】：2021-11-04 00:26:21
【问题描述】：

需要关于图表 js 的帮助

实际上，我正在使用 VUE-CHARTJS，但它只是一个包装器

在左侧的折线图中，数字增加了 5（0、5、10、15 等）我希望它增加 10 并降低图表的高度，因此纵横比是某种东西像 16/9

也可以让左边的数字说 5k+, 10k+, 15k+ 而不是 5, 10, 15

这是我的图表代码

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  data: () => ({
    chartdata: {
    labels: ['January', 'February', 'March', 'April', 'May','Jun'],
    datasets: [
        {
            data: [12, 20, 27, 22, 14, 10],
            borderColor: "#135193",
            pointBackgroundColor: "#135193",
            pointBorderColor: "#135193",
            backgroundColor: 'rgba(255, 255, 255, 0)'
        },
        {
            data: [3, 12, 17, 20, 30, 40],
            borderColor: "#FF8811",
            pointBackgroundColor: "#FF8811",
            pointBorderColor: "#FF8811",
            backgroundColor: 'rgba(255, 255, 255, 0)'
        }
    ]
    },
    options: {
      responsive: true,
      legend: {
        display: false
      }
    }
  }),

  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

【问题讨论】：

标签： vue.js chart.js resize height vue-chartjs

【解决方案1】：

是的，您可以只使用 CSS 设置画布的尺寸，并在选项中将 maintainAspectRatio 设置为 false，对于刻度，您可以使用刻度回调：

const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];

const options = {
  type: 'line',
  data: {
    labels,
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'red',
      backgroundColor: 'pink'
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          callback: (val) => (`${val}K`)
        }
      }]
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  max-height: 180px;
  max-width: 320px;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

【讨论】：

【解决方案2】：

好吧，事实证明它就像用容器包装图表并根据需要设置该容器的高度一样简单

【讨论】：