Angular График JS масштабирует минимальное значение и обратный вызов не работает - PullRequest
Новая
       0

Angular График JS масштабирует минимальное значение и обратный вызов не работает

0 голосов
/ 14 марта 2020

Я пытаюсь использовать график JS в моем приложении Angular 9. Я хочу масштабировать оси Y моего графика, чтобы отображать значения от 0 (вместо минимального значения) и добавлять метку «%» после значения. Мой код выглядит следующим образом. Есть идеи в чем проблема? 

this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels,
        datasets: [
          {
            data: dataPoints, 
            borderColor: '#00AEFF',
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true,
              suggestedMin: 0,
              min: 0,
              callback(value, index, values) {
                 return value + '%';
              }
            },
            afterBuildTicks(chart) {

            }
          }],
        }
      }
    });

1 Ответ

0 голосов
/ 14 марта 2020

В вашем коде есть ряд ошибок, которые необходимо исправить, чтобы он работал.

В Angular 8, @ViewChild ожидает второй параметр 

@ViewChild('lineChart', {static: true}) private chartRef;

Диаграмма должен быть создан внутри ngOnInit, холст еще не доступен во время создания Component. Это в основном то, откуда взято Error: Cannot read property 'nativeElement' of undefined.

scales.yAxes.ticks.callback внутри диаграммы options неправильно определено как функция.

Также canvas необходимо заключить в a div.

Пожалуйста, ознакомьтесь с измененным StackBlitz

...