时间戳

首页 > 解决方案 > Chart.js angular8 Y 轴刻度

javascript - Chart.js angular8 Y 轴刻度

问题描述

如何在 chart.js 中动态更新 Y 轴刻度。我尝试使用以下命令对其进行更新：

this.chartOptions.scales.yAxes[0].ticks.min = 10;
this.chartOptions.scales.yAxes[0].ticks.max = 18;

标签： javascriptangularchart.js

解决方案

更改图表选项后，您需要调用chart.update(). 有关更多详细信息，请参阅Chart.js 文档中的更新选项。

请运行以下代码示例并按下Update按钮以查看其工作原理。

function updateYAxis() {
  chart.options.scales.yAxes[0].ticks.min = 20;
  chart.options.scales.yAxes[0].ticks.max = 100;
  chart.update();
}

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'My First Dataset',
      data: [30, 59, 80],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
      borderWidth: 1
    }]
  },
  options: { 
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
canvas {
  max-width: 300px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 8px 14px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
<button onclick="updateYAxis()">Update</button>

推荐阅读