Highcharts突出線

Question

我使用Highcharts繪製了曲線圖，單點。 頁面加載時，該線圖繪製。請注意，我得到了一個Y值開始從0至700的每個x值（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

使用點對象 http://api.highcharts.com/highcharts#series .point.events.select

Answer 2

的選擇方法使用marker我們可以這樣做：

$(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/