График. js угловой8 Тики оси Y - PullRequest
Новая
       6

График. js угловой8 Тики оси Y

0 голосов
/ 17 апреля 2020

Как динамически обновлять отметки оси Y на графике. js. Я попытался обновить его с помощью следующих команд: 

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

1 Ответ

0 голосов
/ 18 апреля 2020

После изменения параметров диаграммы вам нужно вызвать chart.update(). Для получения более подробной информации см. Параметры обновления из таблицы. js Документация.

Пожалуйста, запустите следующий пример кода и нажмите кнопку Обновить , чтобы увидеть, как он работает. 

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>
...