Afficher l'info-bulle pour les séries invisibles dans Highcharts

J'essaie d'afficher une info-bulle personnalisée à l'aide de Highcharts. Vous pouvez trouver un exemple de code ici:
http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

Lorsque vous passez la souris sur le graphique, vous pouvez voir que l'info-bulle ne contient que des valeurs de la Série 2, mais pas de la Série 1 (qui est invisible). Lorsque vous cliquez sur "Série 1" dans la légende, vous pouvez voir les valeurs de la Série 1 dans l'info-bulle.

EDIT: pas de code à s'engager, juste la fixation linkrot/adhérant aux règles d'édition...
Est-il possible d'afficher les valeurs d'une invisible de la série dans une info-bulle?

source d'informationauteur j0nes | 2011-09-26

  1. 12
    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
}
  2. 4

    L'info-bulle formateur est une fonction comme une autre fonction, donc si vous venez de rendre les données disponibles, il peut retourner une chaîne avec des valeurs pour toutes les séries. Dans ce exemple j'ai déplacé la série des tableaux et des catégories de variables distinctes et l'info-bulle formateur utilise un index dans ces tableaux afin de trouver les valeurs.

    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;
}
  3. 4

    Une autre façon d'aller à ce sujet est de faire de certains attributs de la série invisible, plutôt que l'ensemble de la série elle-même. Cela vous permettra de voir dans l'info-bulle et de la légende.

    Voici ce que j'ai fait:

    1. D'abord, j'ai mis la couleur de la ligne de l'invisible de la série "transparente".
    2. Prochaine, j'ai défini la couleur de remplissage de l'invisible série de marqueurs pour "transparente".
    3. Enfin, j'ai désactivé l'état de pointage pour les marqueurs. Cela empêche le ténébreux mettre en évidence les cercles d'apparaître comme vous vous déplacez le curseur de votre souris sur chaque point de la série visible.

    Voici une version modifiée de l'original de votre violon avec ces modifications: 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]
}]

    Deux éléments sont à noter:

    1. J'ai utilisé l'attribut enableMouseTracking: false avec d'autres invisibles de la série pour empêcher les utilisateurs d'interagir avec eux (pour réaliser des effets visuels). Si vous définissez pour votre invisible de la série, elle permettra d'éviter la série de données d'apparaître dans votre bulle d'aide.
    2. Si vous voulez garder votre invisbile série d'apparaître dans la légende, vous pouvez ajouter l'attribut showInLegend: false. Ses données seront toujours dans l'info-bulle.

    J'espère que cela aide les autres qui viennent à travers cette question.

  4. 0

    Trop tard pour la réponse, mais c'est ce que j'ai fait. Tracer le graphique et rendre la couleur transparente. Tracée sur la face de l'axe y et jeu de max à zéro. Ensemble alignTicks à false. Quelque chose comme cela.

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

    Alors la seule chose nécessaire est de changer la valeur de la couleur dans l'info-bulle formateur depuis l'étiquette sera transparent.

    Espère que cela aide quelqu'un.

    Heureux D'Apprendre 🙂