Wyświetlenie etykiety narzędzi dla niewidocznych serii w tabelach Highcharts

Question

Próbuję wyświetlić niestandardową etykietkę narzędzi za pomocą funkcji Highcharts. Można znaleźć przykładowy kod tutaj: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

Po najechaniu na wykresie widać, że etykietka zawiera tylko wartości z serii 2, ale nie z Serii 1 (który jest niewidoczny). Po kliknięciu w legendzie "Seria 1" można zobaczyć wartości z serii 1 w podpowiedzi.

EDIT: no code popełnić tylko mocowania linkrot/przestrzeganie zasad edycyjnych ...
Czy istnieje jakiś sposób, aby wyświetlić wartości z niewidzialnego serii w dymku?

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

Narzędzie do formatowania podpowiedzi jest funkcją podobną do każdej innej funkcji, więc jeśli tylko udostępnisz dane, może zwrócić ciąg znaków z wartościami dla wszystkich serii. W tym example przesunąłem szeregi tablic i kategorii, aby oddzielić zmienne, a narzędzie do formatowania podpowiedzi używa indeksu do tych tablic, aby znaleźć wartości.

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

Innym sposobem, aby go o to, aby pewne cechy serii niewidoczne, zamiast całego samej serii. Umożliwi to zobaczenie go w etykiecie narzędzi i legendzie.

Oto co zrobiłem „przezroczysty”

1. Po pierwsze, ustawić kolor linii niewidzialnego szeregowo
2. Następnie ustawiam kolor wypełnienia dla niewidocznych znaczników serii na "przezroczysty".
3. W końcu wyłączyłem stan zawisu dla znaczników. Zapobiega to pojawianiu się niewyraźnych kółek podświetlenia podczas przesuwania wskaźnika myszy nad każdym punktem widocznej serii.

Oto zmodyfikowana wersja oryginalnego ryba z tymi zmianami: 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] 
}] 

Dwa przedmioty do uwaga:

1. Użyłem atrybut enableMouseTracking: false z drugiej niewidzialnej serii, aby zapobiec interakcji użytkowników z nimi (w celu uzyskania efektów wizualnych). Jeśli ustawisz to dla swojej niewidzialnej serii, zapobiegnie to pojawianiu się danych serii w twojej podpowiedzi.
2. Jeśli chcesz, aby Twoja seria niewidoczna nie pojawiała się w legendzie, możesz dodać atrybut showInLegend: false. Jego dane będą nadal wyświetlane w etykiecie narzędzia.

Mam nadzieję, że pomoże to innym osobom, które zetkną się z tym pytaniem.

Answer 4

Zbyt późno na odpowiedź, ale to właśnie zrobiłem. Sporządź wykres i zmień kolor na przezroczysty. Wykreślono go na przeciwnej osi y i ustawiono maksimum na zero. Ustaw alignTicks na false. Coś takiego.

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

Następnie wystarczy zmienić wartość koloru w edytorze narzędzi, ponieważ etykieta będzie przezroczysta.

Mam nadzieję, że to komuś pomaga.

Happy Learning :)