Mostrar información sobre herramientas para series invisibles en Highcharts

Question

Estoy tratando de mostrar una información sobre herramientas personalizada usando Highcharts. Se puede encontrar un ejemplo del código aquí: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

Al pasar sobre el gráfico, se puede ver que la descripción sólo contiene los valores de la Serie 2, pero no de la Serie 1 (que es invisible). Cuando hace clic en "Serie 1" en la leyenda, puede ver los valores de la Serie 1 en la información sobre herramientas.

EDIT: sin code a cometer, sólo ajustar linkrot/adherirse a las reglas de edición ...
¿Hay alguna manera de mostrar los valores de una serie invisible en un texto de ayuda?

Answer 1

tooltip: { 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 
     var chart = this.points[0].series.chart; //get the chart object 
     var categories = chart.xAxis[0].categories; //get the categories array 
     var index = 0; 
     while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays   
     $.each(chart.series, function(i, series) { //loop through series array 
      s += '<br/>'+ series.name +': ' + 
       series.data[index].y +'m';  //use index to get the y value 
     });   
     return s; 
    }, 
    shared: true 
} 

Answer 2

El formateador de información sobre herramientas es una función como cualquier otra función, por lo que si solo hace que los datos estén disponibles, puede devolver una cadena con valores para todas las series. En este example moví las matrices y categorías de la serie a variables separadas y el formateador de información sobre herramientas utiliza un índice en estas matrices para encontrar los valores.

formatter: function() { 
    var index = $.inArray(this.x, categories); 
    var s = '<b>'+ this.x +'</b>'; 

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index]; 
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index]; 

    return s; 
} 

Answer 3

Otra forma de hacer esto es hacer que ciertos atributos de la serie invisible, en lugar de toda la propia serie. Esto le permitirá verlo en la información sobre herramientas y en la leyenda.

Aquí es lo que hice:

1. En primer lugar, establecer el color de la línea de la serie invisible a "transparente".
2. A continuación, configuré el color de relleno para los marcadores de la serie invisible como "transparente".
3. Finalmente, deshabilité el estado de desplazamiento para los marcadores. Esto evita que aparezcan círculos de luces oscuras a medida que mueve el cursor del mouse sobre cada punto de la serie visible.

Aquí es una versión modificada de su violín original con estos cambios: http://jsfiddle.net/brightmatrix/fDNh9/184/

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    lineColor: 'transparent',  // make the line invisible 
    marker: { 
     fillColor: 'transparent', // make the line markers invisible 
     states: { 
      hover: { 
       enabled: false  // prevent the highlight circle on hover 
      } 
     } 
    } 
}, { 
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
}] 

Dos elementos a destacar:

1. He usado el atributo enableMouseTracking: false con otras series invisible para prevenir los usuarios interactúan con ellos (para lograr efectos visuales). Si configura esto para su serie invisible, evitará que los datos de la serie aparezcan en su información sobre herramientas.
2. Si desea evitar que su serie invisible aparezca en la leyenda, puede agregar el atributo showInLegend: false. Sus datos se mostrarán en la información sobre herramientas.

Espero que esto ayude a otros que se encuentren con esta pregunta.

Answer 4

Demasiado tarde para la respuesta, pero esto es lo que hice. Trace la tabla y haga que el color sea transparente. Lo trazó en el eje y opuesto y estableció max a cero. Establezca alignTicks en falso. Algo como esto.

chart: { 
     alignTicks: false, 
     type: 'line' 
    }, 

Luego, lo único que se necesita es cambiar el valor del color en el formateador Tooltip ya que la etiqueta será transparente.

Espero que esto ayude a alguien.

Happy Learning :)