Как сделать график как на картинке ниже в угловом - PullRequest
Новая
       28

Как сделать график как на картинке ниже в угловом

0 голосов
/ 27 марта 2019

Поскольку я новичок в Angular, я сталкиваюсь с проблемой в Graph, я не знаю, как это сделать в angular

Пробовал с Chart.js и Canvasjs. В обоих случаях я сталкиваюсь с проблемой 1. С Chart.js Мне удалось создать статический график, как показано на рисунке ниже, но я не понимаю, как получить данные из API для этого графика.

Примечание. Я могу отображать любые данные с помощью API, кроме Graph.Поэтому, пожалуйста, помогите мне с этим графическим элементом.

enter image description here

LineChart = {};

  ngOnInit() {
    // Line chart:
    this.LineChart = new Chart('lineChart', {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
          label: 'Number of Items Sold in Months',
          data: [9, 7, 3, 5, 2, 10, 15, 16, 19, 3, 1, 9],
          fill: false,
          lineTension: 0.2,
          borderColor: 'white',
          borderWidth: 1
        }]
      },
      options: {
        title: {
          text: 'Line Chart',
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

Примечание: я могу отображать любые данные с помощью API, кроме GraphИтак, пожалуйста, помогите мне с этим графом вещь.

График должен прийти

1 Ответ

0 голосов
/ 27 марта 2019

Перед инициализацией объекта диаграммы извлеките данные из API и создайте массив данных, затем инициализируйте объект диаграммы.

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

...