Блог

Главная - Вопросы по программированию - Почему мои данные ng2-диаграммы неправильно масштабируются?

Почему мои данные ng2-диаграммы неправильно масштабируются?

#angular #chart.js #ng2-charts

Вопрос:

У меня есть некоторые данные, поступающие из службы, которые отображаются в ng2-chart .

Это фиктивная диаграмма, которая на данный момент отображает некоторые поддельные данные.

Вот сторона HTML:

           <canvas
             baseChart
             [datasets]="[getDataSet(currentTest.results['cpu'])]"
             [options]="timeChartOptions"
             chartType="line"
          >
          </canvas>

Вот timeChartOptions :

    public timeChartOptions: ChartOptions = {
      scales: {
         xAxes: [
            {
               type: 'time',
               time: {
                  unit: 'second',
               },
            },
         ],
      },
   };

и вот как я форматирую данные(у меня только одна серия):

    public getDataSet(testResult: TestResult): ChartDataSets | undefined {
      if (testResult) {
         return {
            data: testResult.indexes.map((x, index) => ({ x:  x, y: testResult.values[index] })),
            label: testResult.name,
         };
      }
      return undefined;
   }
}

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

  1. Он быстро мигает со 100% правильным дисплеем
  2. Тогда данные не имеют правильной амплитуды(если это поможет, мои данные имеют амплитуду от 1 до 22).

Вот небольшое видео того, что я вижу, когда обновляю страницу: https://www.screencast.com/t/LzUdPK4mu

Есть идеи, чего мне не хватает?

Ответ №1:

Я нашел ответ!

Проблема заключалась в том, что я использовал функцию для вычисления набора данных для ng-диаграмм. Когда я поставил a console.log , я понял, что эта функция часто вызывается, поэтому в основном диаграмма получала новый набор данных в цикле, и я предполагаю, что есть какая-то начальная анимация.

Метки: