1

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

无法读取未定义的属性“系列”。

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

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();

我猜错误出在图表的引用方式上。我不确定如何在 typescript 中引用它，并在 java script 中查找了一些示例。

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

4

1 回答 1

0

您可以使用 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;

}

普朗克

于 2017-12-16T11:58:42.857 回答