Question

我有一个angular2-highcharts图表。我想根据单击的行突出显示数据系列的选择行。我使用以下代码来执行此操作，并收到错误消息

无法阅读属性＆＃39;系列＆＃39;未定义的。

我预定了我的系列，它有名称，数据，颜色和宽度元素。

this.options={
    title : { text : 'Sample' },
    legend:{enabled:false},
    plotOptions:{
        series:{
            events:{
                mouseOver:function(){
                var m=this.series.options.id;
                var abc=series;
                var new_series=[];
                for(var i=0;i<abc.length;i++)
                    {abc[i].color='black';}
                abc[m].color='red';
                for(var i=0;i<chart.series.length;i++)
                    {chart.series[i].remove();
                    new_series.push({name:abc[i].name,data:abc[i].data,color:abc[i].color})
                    } 
                chart.addSeries(new_series,false);
                chart.redraw();

                }
            }
        },
    },

    series:series,
    xAxis:{title:{text:'X'}},
    yAxis:{title:{text:'Y'}},
}

$('#conatainer').highcharts(this.options)
var chart=$('#conatainer').highcharts();

我猜错误是图表被引用的方式。我不知道如何在打字稿中引用它，并在java脚本中查找了一些示例来执行此操作。

知道如何纠正这一点非常有帮助。

Answer 1

您可以使用angular2-highcharts

在点击时实现系列突出显示

class AppComponent {
    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            plotOptions:{
                      series:{
                          events: {
                      click: function(e) {

                        let series=this.chart.series;
                        for(let i=0;i<series.length;i++){

                          if(i==this.index){
                             this.chart.series[i].options.color = "#008800";
                             this.chart.series[i].update(this.chart.series[i].options);
                          }else{

                          this.chart.series[i].options.color = "#7cb5ec";
                          this.chart.series[i].update(this.chart.series[i].options);
                          }

                        }

                      }
                    },
                },
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129],
                color : "#7cb5ec"
            },{
                data: [19.9, 21.5, 6.4, 29],
                color : "#7cb5ec"
            },{
                data: [10.9, 15.5, 30.4, 45],
                color : "#7cb5ec"
            }]
        };
    }
    options: Object;

}

Plunker

angular2-highcharts系列亮点

1 个答案: