Javascript 高位图表无法动态添加系列

我第一次使用HighCharts，很难找到帮助我解决这个问题的资源

我正在尝试显示多个系列数不同的图表。与设置多个选项模板不同，我只想使用一个模板，每次使用一个函数自定义选项对象。在这里，我提供了从API接收到的图表的模拟数据。在应用程序中，我计划从HTML提供它

由于对图表缺乏了解，我不断遇到各种各样的问题，现在我只是在绕圈解决一个问题，只是为了让过去的问题再次出现。我希望有人能给我指出正确的方向。 这是我的班级：

export class CompletenessTabComponent implements OnInit, AfterViewInit {
  @ViewChild('chartTarget') chartTarget: ElementRef;

  chart: Highcharts.ChartObject;

  dataObj = {"id":0,
    "tableName":"d1 vs d2",
    "data":{"d1Count":[50,45,55,60,70],
      "d2Count":[40,32,55,58,33],
      "Errors":[2,3,4,1,0]},
    "dates":[20180927,20180928,20181001,20181002,20181003]
  };

  constructor() { }

  setHighChartOptions(data, seriesNames, chartTitle ): any {
    count = 1;
    highChartOptions.title.text = chartTitle;
    highChartOptions.xAxis.data = data.dates;
    this.chart.series[0].setData(this.dataObj.data[0]);
    Object.keys(data.data).forEach((key) =>
      this.chart.addSeries({
        name: seriesNames[count],
        data: data.data[key],
        type: 'line'
      }) count ++
    );
    return highChartOptions;
  }
  getHighChartOptions(){
    return highChartOptions;
  }
  ngOnInit() {
    this.chart = chart(this.chartTarget.nativeElement, this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName));
    Object.keys(this.dataObj.data).forEach(key =>
    console.log(key, this.dataObj.data[key]))
  }
  ngAfterViewInit() {
  }

}

const highChartOptions = {
  colors:
    ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],

  credits: {
    enabled: false
  },
  chart: {
    backgroundColor: null,
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    itemStyle: {
      fontSize: '10px',
      fontWeight: 'normal'
    }
  },
  tooltip: {
    valuePrefix: '$'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'date',
    data: [],
    title: 'date'
  },
  yAxis: {
    title: {
      align: 'middle',
      rotation: 0,
      text: ''
    }
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      shadow: false
    }
  },
  series: [{
    type: 'line',
    name: '',
    data: [null]
  }]
};

我一直收到的几个错误是：

在setHighChartOptions（）中：无法读取未定义的属性“series”（在，this.chart.series[0]），无法读取未定义的属性“keys”（在ForEach循环的开头）

我认为最大的问题是图表对象是未定义的，这是没有意义的，因为我在类的顶部实例化了它，然后在我设置图表选项的时候

---

我希望你能发现我的错误并帮助我。谢谢。

首先，您必须小心在Angular项目中正确使用import all js软件包：

import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

此外，您必须检查您的软件包是否正确安装了“npm”

毕竟，在我看来，这个示例可以帮助您更好地理解如何在项目中使用“highcharts”包，其他配置取决于您使用的“highcharts”版本

import { Component, ElementRef, ViewChild } from '@angular/core';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Highcharts Sample';

  @ViewChild('chartTarget') chartTarget: ElementRef;

  chart: Highcharts.ChartObject;

  ngAfterViewInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Sample Title'
      },
      xAxis: {
        categories: ['Top Test', 'Test 2', 'Test3']
      },
      yAxis: {
        title: {
          text: 'Fox Rex'
        }
      },
      series: [{
        name: 'Tomi',
        data: [1, 0, 4]
      }, {
        name: 'Alex',
        data: [5, 7, 3]
      }]
    };

    this.chart = chart(this.chartTarget.nativeElement, options);
  }

  addSeries(){
    this.chart.addSeries({
      name:'Test',
      data:[2,3,7]
    })    
  }
}

和样本的HTML模板：

<div #chartTarget>
  chart target sample
</div>

图表目标样本

---

此外，您必须向highcharts提供数据，因为格式是标准格式，请检查highcharts网站示例中的JSON示例数据格式。

很可能是因为您试图引用尚未定义的系列。实际上，如果您第一次调用

setHighchartsOptions

，您的图表尚未定义

为了使其正常工作，请先尝试初始化图表（甚至可能是空图表，没有任何数据），然后在

chart

对象上调用另一个方法，如

addSeries

。诸如此类，但我并没有看到你们的整个应用程序，所以很难编写完全调整的解决方案

ngOnInit() {
    this.chart = chart(this.chartTarget.nativeElement, {});
    this.chart.update(this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName))
    Object.keys(this.dataObj.data).forEach(key =>
    console.log(key, this.dataObj.data[key]))
  }

---

谢谢，我会尝试看看这是否会有所不同。当我想在同一页上显示多个图表时，这不起作用。我需要为每个图表定义一个新的图表对象吗？我决定创建一个单独的组件，向其中提供数据，我可以在其中定义一个选项结构，用于创建多个图表，希望一个好方法是为其中任何一个创建一个新组件，尽管可以在一个组件中显示多个。如果图表类型对您不重要，请检查D3和C3图表，而不是Highchart。此外，对于图表对象，您可以有一个对象，并覆盖任何图表的对象。我正在研究这个问题，但在为类似模拟数据的结构设置图表对象之前，如何使用addSeries（）函数添加到opitons。这就是我在实例化图表时遇到问题的地方=/Your

highChartOptions

是一个

const

你不能修改

const

只要删除这个前缀我就知道了。我意识到设置选项功能导致了问题。