Блог

Главная - Вопросы по программированию - Значения тиков ChartJS неверны

Значения тиков ChartJS неверны

#angular #chart.js #ng2-charts

Вопрос:

Я работаю над угловой версией 11.0.4 , я использую версию ng2-диаграмм 2.4.2 . Я должен визуализировать базовые линейные диаграммы с некоторыми пользовательскими функциями. Одна из функций состоит в том, чтобы раскрасить некоторые линии сетки на основе значений внешнего API.

Вот пример: для значения Y 2 я хочу иметь красный цвет. введите описание изображения здесь

Поскольку я не нашел хорошего решения этой проблемы, я пытаюсь сделать следующее: внутри параметров линейной диаграммы внутри масштабов есть объект yAxes. Существует ряд обратных вызовов ( вот документация https://www.chartjs.org/docs/next/axes/#callbacks ), который дает мне значения тиков после визуализации. На основе этих значений я обновляю значения цвета линий сетки.

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

Вот что я написал:

       scales: {
    ...this.lineChartOptions.scales,
    yAxes: [{
      ticks: {
        beginAtZero: true
      }          
     afterTickToLabelConversion: (scale) => {
        console.log(scale);
        return scale;
      }
    }],

Это то, что выводит console.log:

введите описание изображения здесь

И это то, что отображается на диаграмме:

введите описание изображения здесь

Как вы можете видеть, console.log выводит 10 значений от 18 до 0. На графике отображаются значения тиков от 19 до 17.

HTML-код:

 <canvas id="chartContainer" baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels"
[options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
[plugins]="lineChartPlugins">

Комментарии:

1. Я перепробовал все варианты обратного вызова внутри опций: AfterUpdate, afterFit. Каждый из них дает мне одни и те же значения, но те, которые показаны на диаграмме.

Ответ №1:

С помощью предоставленного вами кода массив галочек содержит правильные галочки, если я попытаюсь напечатать их нормально: https://jsfiddle.net/Leelenaleee/bfc3evz1/6/.

Если вы хотите, чтобы цифра 2 была красной, а остальные-черными, ваш лучший вариант-обновить до последней версии chart.js это означает, что вам нужно использовать бета-версию ng2-диаграмм, а затем вы можете использовать параметры сценария.

 var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          color: ({
            tick
          }) => (tick.value === 12 ? 'red' : Chart.defaults.color)
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); 
 <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Комментарии:

1. Я обновил библиотеки. Это работает. Спасибо.

Метки: