时间戳

首页 > 解决方案 > 调整 vue-chartjs 高度，同时保持响应

vue.js - 调整 vue-chartjs 高度，同时保持响应

问题描述

需要图表 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.jschart.jsresizeheightvue-chartjs

解决方案

是的，您可以使用 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>

推荐阅读