Charts.js в Angular 7 - работа с импортированным временем для временных рядов - PullRequest
Новая
       11

Charts.js в Angular 7 - работа с импортированным временем для временных рядов

0 голосов
/ 27 февраля 2019

Недавно я работал с Angular 7 и Typescript, и я пытаюсь создать веб-страницу, которая показывает некоторые графики для данных измерений, которые я загружаю.Объект измерения, который получает моя программа, имеет два массива: значение (число) и время (объект Дата).Их размеры идут от 1000 (1000 значений и 1000 временных меток).Теперь я могу отобразить свои данные, когда ось X показывает только метки (тогда масштабирование или панорамирование оси X не работает).Я посмотрел на образцы и не мог понять, как я могу добавить свой временной массив в качестве набора данных тиков.

Вот мой код для создания диаграммы ниже: 

  createPowerChart() {
this.PowerChart = new Chart('powerChart', {
  type: 'line',
  data: {
    datasets: [{
      data: this.powerchartMeasurementsY,
      fill: false,
      lineTension: 0,
      borderColor: "black",
      borderWidth: 2,
    }]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: function (tooltipItem) {
          return tooltipItem.yLabel;
        }
      }
    },
    elements: {
      point: {
        radius: 0
      }
    },
    title: {
      text: "Power",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: "time",
        distribution: "series",
        ticks: {
          source: this.powerchartMeasurementsX
        }
      }]
    },
    maintainAspectRatio: false,
    responsive: false,
    animation: {
      duration: 10
    },
  }
});
}
}

1 Ответ

0 голосов
/ 28 февраля 2019

Я действительно сделал это после проверки еще нескольких примеров, поэтому, если кто-то сталкивается с подобными проблемами, это может помочь.В моем коде выше есть ошибка, где я не вставил «метки», которые необходимы для создания оси X в этом случае.Делать это с 

ticks: {
          source: this.powerchartMeasurementsX
        }

кажется неправильным, и документация или примеры на самом деле не объясняют, как вещи должны использоваться (или они делают, но продвинутым способом).В любом случае, это мой код для графика, который имеет масштабирование и панорамирование, включает временные ряды и устанавливает время начала и окончания ряда.Если у кого-то есть вопросы, не стесняйтесь спрашивать. 

this.PowerChart = new Chart('powerChart', {
      type: 'line',
      data: {
        labels: this.powerchartMeasurementsX,
        datasets: [{
          data: this.powerchartMeasurementsY,
          fill: false,
          lineTension: 0.2,
          borderColor: "black",
          borderWidth: 2,
        }]
      },
      maintainAspectRatio: false,
      responsive: true,
      options: {
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem) {
              return tooltipItem.yLabel;
            }
          }
        },
        elements: {
          point: {
            radius: 0
          }
        },
        title: {
          text: "Power",
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }],
          xAxes:[ {
            type: 'time',
            scaleLabel: {
              display: true,
              labelString: 'Time',
            },
            time: {
              unit:'minute',
              unitStepSize:1,
              min: this.powerchartMeasurementsX[0],
              max: this.powerchartMeasurementsX[this.powerchartMeasurementsX.length - 1]
            }
          }
          ]},
          animation: {
          duration: 10
        },
        pan: {
          enabled: true,
          mode: 'x',
          limits: {
            max: 10000,
            min: 1,
          }
        },
        zoom: {
          enabled: true,
          mode: 'x',
          limits:
          {
            max: 10000,
            min: 1
          }
        }
      }
    });
  }
...