Question

我目前正致力于使用图表高图表进行角度5应用程序。我有一个堆积的条形图。它绘制了各种类别的正面，中性，负面数据量。 xAxis类别是

['Cat1', 'Cat2', 'Cat3', 'Cat4', 'Cat5']

并堆叠正常

 plotOptions: {
    series: {
        stacking: 'normal'
    }
  }

，系列数据的格式为

series : [
      {name : 'positive', data : [1,5,6,8,9]},
      {name : 'neutral', data : [2,6,7,8,3]},
      {name : 'negative', data : [3,6,4,2,8]}
    ]

效果很好。现在，我有一个名为categorySentimentData的数组，其中每个对象都包含一个公司值以及一个seriesData值（以所需的格式输入到我们的图表中）。

    {company : company.companyname,
    seriesData : [
      {name : 'positive', data : positiveArray},
      {name : 'neutral', data : neutralArray},
      {name : 'negative', data : negativeArray}
    ]

现在我有一个select标签，其选项是各种公司名称。当我选择不同的公司时，图表应该输入适当的系列数据并重新绘制。我的图表创建代码：

this.categorySentimentChart = new Highcharts.Chart('compChart',{
  chart : {
    type : 'bar'
  },
  title : {
    text : this.selectedCompany
  },
  xAxis : {                
    categories : categoryList,        
  },
  yAxis : {                
    title : {
      text : ''
    }
  },
  legend : {
    reversed : true, 
    layout : 'horizontal',
    align : 'center',
    verticalAlign : 'bottom'
  },
  plotOptions: {
    series: {
        stacking: 'normal'
    }
  },
  series : this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData
});

我搜索了更改系列数据和重绘图表的方法。它们都有相同的代码

chart.series[0].setData([1,2,3,4,5]);

有没有办法可以重置整个系列数据并重新绘制？这是我选择公司时目前使用的功能

 onCompanyChange() {    
let targetSeriesData = this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData;    
this.categorySentimentChart.series.forEach((item, index) => {      
  this.categorySentimentCompetitorChart.series[index].setData(targetSeriesData[index], false);
});
console.log(this.categorySentimentCompetitorChart.series);
this.categorySentimentCompetitorChart.redraw();  }

但这不起作用。单击公司后，图表就会消失。请指导我如何实现所需的功能。这是一个jsfiddle链接，尽可能地重新创建场景https://jsfiddle.net/j8zyx6ba/19/。 TIA

重置整个系列数据并在高级图表中重绘

0 个答案: