Highcharts突出顯示單點在線

Question

我正在使用Highcharts繪制折線圖。 頁面加載時，繪制折線圖。 請注意，我得到的每個x值的y值從0到700（0,1,2,3，...，700）。 這就是我創建圖形的方式：

                chart = new Highcharts.Chart({
                                    chart: {
                                         renderTo: 'container',
                                         animation: false,
                                         type: 'line',
                                         marginTop: null,
                                         marginRight: 55,
                                         marginBottom: 50,
                                         marginLeft: 80,
                                         backgroundColor: backgroundColor,
                                         spacingTop: 10,
                                         spacingRight: 10,
                                         spacingBottom: 15,
                                         spacingLeft: 10,
                                         },
                                   title: {
                                         text: ' Graph',
                                         style: {color: graphLabelColor},
                                         x: -20 //center
                                         },
                                   xAxis: {
                                         title: {
                                         text: 'xAXIS',
                                         style: {
                                            color: axisLabelColor
                                            },
                                         },
                                         min:0,
                                         max: 600,
                                         gridLineColor: gridLineColor,
                                         minorTickInterval: 50,
                                         minorTickLength: 1,
                                         tickInterval: 100,
                                         minorGridLineWidth: 0,
                                         gridLineWidth: 1,
                                         lineColor: axisColor,
                                         labels: { 
                                            style : {
                                                color: axisColor
                                                }
                                            },
                                         plotLines: [{
                                                     value: 0,
                                                     width: 0,
                                                     color: axisColor
                                                     }]
                                         },
                                  yAxis: {
                                         title: {
                                            text: 'yAxis',
                                            style: {color: 
                                                axisLabelColor
                                            },
                                         },
                                         min:0,   
                                         max: 700,
                                         gridLineColor: gridLineColor,
                                         lineColor: axisColor,
                                         minorTickInterval: 50,
                                         minorTickLength: 1,
                                         minorGridLineWidth: 0,
                                         tickInterval: 100,
                                         labels: { 
                                            style: { 
                                                color: axisColor
                                            }
                                         },
                                         plotLines: [{
                                                     value: 0,
                                                     width: 0,
                                                     color: axisColor
                                                     }]
                                         },
                                    exporting: {
                                         enabled: false
                                         },
                                    tooltip: {
                                            enabled: true,
                                            borderColor: crosshairColor,
                                            crosshairs: [{
                                                width: 1,
                                                color: crosshairColor,
                                            },
                                                {
                                                width: 1,
                                                color: crosshairColor,
                                            }],
                                            formatter: function() {
                                                return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
                                                }
                                         },
                                     legend: {
                                            layout: 'vertical',
                                            align: 'right',
                                            verticalAlign: 'top',
                                            x: -10,
                                            y: 100,
                                            borderWidth: 1,
                                            borderColor: plotlineColor,
                                            enabled: false,
                                            floating: true,
                                            shadow: true
                                            },
                                     plotOptions: {
                                            series: {
                                                enableMouseTracking: true
                                            },
                                            line: {
                                                color:plotlineColor,
                                                },
                                            },
                                     series: [{
                                             lineWidth: 2,
                                             name: carname,
                                             data: dataArray,
                                             marker: {
                                                  color:crosshairColor,
                                                  radius: 1
                                                  }
                                             }]

                                         });

在我的HTML頁面中，我有兩個按鈕來增加/減少（+ 1 / -1）文本字段中的數字，從200開始。數字代表圖中的x坐標。 我想在第一次加載圖表時以及當用戶使用其中一個按鈕更改數字時，使用另一種顏色和更大的點突出顯示圖表中文本字段的顯示數量。 我怎樣才能做到這一點？

我試過了

       chart.series[0].options.data[valueOfTextfield].color = 'yellow';
       chart.redraw(true);

在按鈕的onclick方法但它不起作用。

謝謝你的回答！

Answer 1

使用標記我們可以這樣做：

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },



        series: [{
            data: [29.9, { marker: {
                    fillColor: '#FF0000',
                    lineWidth: 3,
                    lineColor: "#FF0000" // inherit from series
            },y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

http://jsfiddle.net/zR4Kn/

Answer 2

使用點對象的select方法https://api.highcharts.com/highcharts/series.line.point.events.select