Highcharts evidenziare un singolo punto sulla linea

Question

Sto usando Highcharts per disegnare un grafico a linee. Quando la pagina viene caricata, viene disegnato il grafico a linee. Si noti che ho ottenuto un valore y per ogni valore x a partire da 0 fino a 700 (0,1,2,3, ..., 700). Questo è come genero il grafico:

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

             }); 

Nella mia pagina HTML Ho due pulsanti per aumentare/diminuire (+ 1/-1) un numero in un campo di testo, a partire da 200. Il numero rappresenta una x -Coordinate nel grafico. Vorrei evidenziare il numero mostrato del mio campo di testo nel grafico con un altro colore e un punto più grande quando il grafico viene caricato la prima volta e anche quando l'utente cambia il numero usando uno di questi pulsanti. Come posso fare questo?

Ho provato

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

nel metodo onclick dei pulsanti ma doesnt lavoro.

Grazie per le vostre risposte!

Answer 1

utilizzare il metodo di selezione dell'oggetto punto http://api.highcharts.com/highcharts#series .point.events.select

Answer 2

Utilizzando un marker possiamo farlo:

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