2013-08-07 16 views
7

Ich möchte den Tooltip des letzten Punkts in einer bestimmten Serie anpassen, lassen Sie andere Punkte in dieser Serie und andere Serien, mit Standard-Tooltip-Format. Im Grunde bin ich auf der Suche nach etwas ähnlich zu dieser Konfiguration. Vielen Dank im Voraus für Ihre Hilfe!highcharts Tooltip für einen einzelnen Punkt anpassen

series: [{ 
      tooltip: { // ?? tooltip does not work inside series 
       formatter: function() { 
        if (lastPoint in the series) { // ?? how to determine if lastPoint 
         return '<b>Final result is </b> ' + this.y; 
        } 
        // ?? return default format if it is not the last point in the series 
       } 
      },    
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]   
     }, { 
      data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]   
     }] 

Antwort

13

Die Formatierungsfunktion scheint nicht zu funktionieren, wenn sie für eine Serie definiert ist. Sie können überprüfen, in welcher Serie Sie sich befinden, indem Sie this.series.name verwenden, und dann können Sie mit this.series.xData.length - 1 == this.point.x prüfen, ob Sie am letzten Punkt sind. Es wäre jedoch einfacher, den Zielpunkt zu benennen und in der Formatierungsfunktion darauf zu prüfen. http://jsfiddle.net/Swsbb/. Um alle Formatierungsdaten zu sehen, klicken Sie hier http://api.highcharts.com/highcharts#tooltip.formatter.

$('#container').highcharts({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] 
    }, 
    tooltip : { 
     formatter: function() { 
      var tooltip; 
      if (this.key == 'last') { 
       tooltip = '<b>Final result is </b> ' + this.y; 
      } 
      else { 
       tooltip = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>'; 
      } 
      return tooltip; 
     } 
    }, 
    series: [{ 
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, {y:135.6, name: 'last'}] 

    }, 
    { 
     data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2] 
    }] 

}); 
Verwandte Themen