Highcharts resalta un solo punto en la línea

Question

Estoy utilizando Highcharts para dibujar un gráfico de líneas. Cuando se carga la página, se dibuja el gráfico de líneas. Tenga en cuenta que obtuve un valor de y para cada valor x empezando desde 0 hasta 700 (0,1,2,3, ..., 700). Éste es cómo crear el gráfico:

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

             }); 

En mi página HTML Tengo dos botones para subir/bajar (+ 1/-1) un número en un campo de texto, a partir de 200. El número representa un x -Cordinar en el gráfico. Me gustaría resaltar el número mostrado de mi campo de texto en el gráfico con otro color y un punto más grande cuando el gráfico se carga la primera vez y también cuando el usuario cambia el número usando uno de estos botones. ¿Cómo puedo hacer esto?

me trataron

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

en el método onclick de los botones pero no funciona.

Gracias por sus respuestas!

Answer 1

utiliza el método de selección del objeto de punto http://api.highcharts.com/highcharts#series .point.events.select

Answer 2

El uso de un marker podemos hacer esto:

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