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

 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 } 

Le formateur d'outils est une fonction comme toute autre fonction, donc si vous mettez simplement les données disponibles, vous pouvez renvoyer une chaîne avec des valeurs pour toutes les séries. Dans cet exemple, j'ai déplacé les tableaux et les catégories de séries pour séparer les variables et le formateur d'outils utilise un index dans ces tableaux pour 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; } 

Une autre façon d'y parvenir est de rendre certains des attributs de la série invisibles, plutôt que toute la série elle-même. Cela vous permettra de le voir dans la info-bulle et la légende.

Voici ce que j'ai fait:

1. Tout d'abord, j'ai mis la couleur de ligne de la série invisible sur "transparent".
2. Ensuite, j'ai configuré la couleur de remplissage pour les marqueurs de série invisibles sur "transparent".
3. Enfin, j'ai désactivé l'état du vol stationnaire pour les marqueurs. Cela empêche les cercles de surbrillance sombres d'apparaître lorsque vous déplacez le curseur de votre souris sur chaque point de la série visible.

Voici une version modifiée de votre violon d'origine avec ces changements: 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 à noter:

1. J'ai utilisé l'attribut enableMouseTracking: false avec d'autres séries invisibles pour empêcher les utilisateurs d'interagir avec eux (pour obtenir des effets visuels). Si vous définissez ceci pour votre série invisible, cela empêchera les données de la série d'apparaître dans votre info-bulle.
2. Si vous souhaitez que votre série invisbile apparaisse dans la légende, vous pouvez ajouter l'attribut showInLegend: false . Ses données apparaîtront encore dans la info-bulle.

J'espère que cela aidera d'autres personnes qui rencontrent cette question.

Trop tard pour la réponse, mais c'est ce que j'ai fait. Parcourez le graphique et rendez la couleur transparente. Ploté sur l'axe y et définis max à zéro. Réglez alignTicks sur false. Quelque chose comme ça.

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

Ensuite, la seule chose nécessaire est de modifier la valeur de couleur dans le formatage de l'outil, car l'étiquette sera transparente.

J'espère que ça aide quelqu'un.

Happy Learning 🙂