основные моменты серии angular2-highcharts

У меня есть диаграмма 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();

Я предполагаю, что ошибка связана со ссылкой на диаграмму. Я не был уверен, как сослаться на него в машинописном тексте, и для этого просмотрел несколько примеров в java-скрипте.

Было бы очень полезно знать, как это исправить.


angular highcharts angular2-highcharts
person Vysh    schedule 26.08.2016    source источник
comment
А как насчет параметра диаграммы? Я не вижу, чтобы вы определили это в своих параметрах перед созданием диаграммы. и если вы используете chart.series, а диаграмма не определена, это вызовет ошибку.   -  person Grzegorz Blachliński    schedule 26.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добиться выделения серии при нажатии, используя 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;

}

Плункер

person Deep 3015    schedule 16.12.2017
comment
можешь немного пояснить, лучше напиши какой вариант сделал работу - person Sunil Garg; 13.05.2020