javascript - pointformat - Mostrar información sobre herramientas para series invisibles en Highcharts

pointformat highcharts

Question

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

Cuando pasa el cursor sobre el gráfico, puede ver que la información sobre herramientas solo contiene 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.

EDITAR: no hay code para confirmar, simplemente arreglando linkrot / adhiriéndose a las reglas de edición ...
¿Hay alguna forma de mostrar los valores de una serie invisible en una información sobre herramientas?

Answer 1

El formateador tooltip 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 ejemplo , moví las matrices y categorías de series 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 2

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 3

Otra forma de hacerlo es hacer que ciertos atributos de la serie sean invisibles, en lugar de la serie completa en sí misma. Esto le permitirá verlo en la información sobre herramientas y en la leyenda.

Esto es lo que hice:

1. Primero, configuré el color de línea de la serie invisible como "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í hay 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 tener en cuenta:

1. He utilizado el atributo enableMouseTracking: false con otras series invisibles para evitar que los usuarios interactúen 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 encuentran 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''
    },

Entonces, 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.

Feliz aprendizaje :)