Highcharts làm nổi bật một điểm trên dòng

Question

Tôi đang sử dụng Highcharts để vẽ biểu đồ đường kẻ. Khi tải trang, biểu đồ đường kẻ được vẽ. Xin lưu ý rằng tôi nhận giá trị y cho mỗi giá trị x bắt đầu từ 0 đến 700 (0,1,2,3, ..., 700). Đây là cách tôi tạo ra các đồ thị:

   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 
                } 
              }] 

             }); 

Trong tôi HTML-Trang tôi có hai nút tăng/giảm (+ 1/-1) một số trong một textfield, bắt đầu từ 200. Số đại diện cho một x -Đóng vai trò trong biểu đồ. Tôi muốn làm nổi bật số hiển thị trường văn bản của tôi trong biểu đồ bằng một màu khác và một điểm lớn hơn khi biểu đồ được tải lần đầu tiên và cũng khi người dùng thay đổi số bằng một trong các nút này. Tôi có thể làm cái này như thế nào?

tôi đã cố gắng

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

trong phương pháp onclick của nút nhưng nó không làm việc.

Cảm ơn câu trả lời của bạn!

Answer 1

sử dụng phương pháp chọn của đối tượng điểm http://api.highcharts.com/highcharts#series .point.events.select

Answer 2

Sử dụng một marker chúng ta có thể làm điều này:

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