角高图表-多行高库存

Question

我正在尝试使用此代码用多行序列填充highchart

this.http
      .get("https://www.highcharts.com/samples/data/goog-c.json")
      .subscribe((goog: any) => {
        this.http
          .get("https://www.highcharts.com/samples/data/msft-c.json")
          .subscribe((msft: any) => {
            this.seriesOptions = [
              {
                name: "GOOG",
                data: goog,
                id: "dataseries",
                color: '#d32f2f',
              },
              {
                name: "MSFT",
                data: msft,
                id: "dataseries",
                color: '#90caf9',
              }
            ];
            this.chartOptions = {
              chart: {
                type: "line",
                zoomType: "xy",
                panning: true,
                panKey: "shift"
              },
              series: this.seriesOptions
            };
          });
      });

问题：高位图表仅采用第一个日期序列，而忽略第二个。那么，采用多个JSON数据序列和填充图的正确方法是什么？

UPDATE 2

我创建示例stackblitz.com/edit/angular-huyilk-e6z282

Answer 1

您的问题的解决方案非常简单。您为两个系列使用了相同的id属性，但它们应该是唯一的。

代码：

this.http
  .get("https://www.highcharts.com/samples/data/goog-c.json")
  .subscribe((goog: any) => {
    this.http
      .get("https://www.highcharts.com/samples/data/msft-c.json")
      .subscribe((msft: any) => {
        this.seriesOptions = [{
            name: "Sensor",
            data: goog,
            id: "dataseries1",
            color: '#d32f2f',
          },
          {
            name: "Batería",
            data: msft,
            id: "dataseries2",
            color: '#90caf9',
          }
        ];
        this.chartOptions = {
          chart: {
            type: "line",
            zoomType: "xy",
            panning: true,
            panKey: "shift"
          },
          series: this.seriesOptions
        };
      });
  });