2014-11-29 15 views
6

Jak wyświetlić etykietę narzędzi widoczną na poniższym obrazku jako współdzieloną?Highcharts: Współdzielona formuła słownika narzędzi this.points [i]

Czasami warto spojrzeć na Highcharts API Reference (szczególnie informacji o udostępnionej opcja): http://api.highcharts.com/highcharts#tooltip.formatter

Oto jsfiddle: http://jsfiddle.net/iginisruber/Ltqnab9x/1/

na pełnym ekranie: http://jsfiddle.net/iginisruber/Ltqnab9x/1/embedded/result/

Próbowałam to, ale to nie zadziałało:

tooltip: { 
 
\t \t \t shared: true, 
 
\t \t \t formatter: function() { 
 
\t \t \t \t var y_value_kwh = (this.points[i].y/1000).toFixed(2); 
 
       return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.points[i].series.color + '">\u25CF</span> ' + this.points[i].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
 
      }, 
 
     },

Aktualny kod:

tooltip: { 
 
\t \t \t //shared: true, 
 
\t \t \t formatter: function() { 
 
\t \t \t \t var y_value_kwh = (this.y/1000).toFixed(2); 
 
       return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
 
      }, 
 
     },

Prąd wyjściowy:

enter image description here

+0

Skonfiguruj przykładowy wykres na jsbin.com lub jsfiddle.com –

+1

@AlfredoDelgado dzięki za uwagę. dodałem jsfiddle. – ignisruber

Odpowiedz

14

Gdy chcesz wyświetlić poszczególne punkty danych dla ułożone wykresów ze wspólną podpowiedzi , musisz przechodzić przez pojedynczy po ints i budować znaczniki podpowiedzi.

tooltip: { 
     shared: true, 
     formatter: function() { 
      var points = this.points; 
      var pointsLength = points.length; 
      var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : ''; 
      var index; 
      var y_value_kwh; 

      for(index = 0; index < pointsLength; index += 1) { 
       y_value_kwh = (points[index].y/1000).toFixed(2); 

       tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
      } 

      return tooltipMarkup; 
     } 
    } 

Oto przykład praca: http://jsbin.com/qatufetiva/1/edit?js,output

+0

dzięki za pomoc! czy istnieje sposób na uelastycznienie tej podpowiedzi, aby mogła poruszać się nieco bardziej? teraz zawsze jest blisko blisko kolumn. podpowiedź podobna do tej na wykresie obszarowym: http://jsfiddle.net/iginisruber/mp2red0h/ dla trybu pełnoekranowego: http://jsfiddle.net/iginisruber/mp2red0h/embedded/result/ – ignisruber

+0

Play with with http: //api.highcharts .com/highcharts # tooltip.positioner –

Powiązane problemy