如何以角度制作如下图所示的图形答案

【问题标题】：How to make Graph like below image in angular如何以角度制作如下图所示的图形
【发布时间】：2019-03-27 13:37:33
【问题描述】：

由于我是 Angular 新手，我在 Graph 中遇到问题，我现在不知道如何在 Angular 中进行此操作

尝试使用 Chart.js 和 Canvasjs 在两者中我都面临问题 1. 使用 Chart.js，我能够创建如下图所示的静态图，但我不知道如何从 API 获取该图的数据。

注意：我可以使用 API 显示任何类型的数据，除了 Graph 所以，请帮我解决这个 Graph 问题。

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 所以，请帮我解决这个 Graph 问题。

图表应该来了

【问题讨论】：

用 chart.js valor-software.com/ng2-charts 检查这个库。它会帮助你
Sheif，我浏览了这个库，但它没有告诉我如何通过 API 显示数据。
我从未使用过 chartjs，所以它可能无关紧要。您是否尝试过创建一个从 API 获取数据并在图表数据中使用的变量？类似于this.LineChart.data.labels = myAPILabelArray 和this.LineChart.data.datasets[0].data = MyAPIDataArray

标签： json angular api graph linechart

【解决方案1】：

在初始化图表对象之前，从 API 获取数据并创建数据数组，然后初始化图表对象。

如果您希望图表不断变化，请使用 Observables 不断获取数据并不断更新图表。

【讨论】：