折線圖海圖

Question

我正在嘗試一條線圖即http://www.highcharts.com/demo/line-basic。需要在每個系列的最後一個點後顯示系列名稱。嘗試使用不同的線條和系列的情節選項。但無法做到這一點。

有人可以幫忙嗎？

function GChart() { 
    jQuery(document).ready(function() { 
    var Options = { 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'line', 
      marginRight: 100, 
      marginBottom: 40 
     }, 
     title: { 
      x: -20 
     }, 
     subtitle: { 
     }, 
     xAxis: { 
     categories: [] 
     }, 
     yAxis: { 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + 
       this.x + ': ' + this.y +  'Kg.'; 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       marker: { 
        enabled: false 
       } 
      } 
     }, 
     series: [] 
    }; 

    $.get('Newchart.html', function(data) { 
     var fulldata = document.getElementById("MyHiddenField").value; 
     var MyChartTitle = document.getElementById("MyChartTitle").value; 
     var MyChartSubTitle = document.getElementById("MyChartSubTitle").value; 
     var MyChartXTitle = document.getElementById("MyChartXTitle").value; 
     var MyChartYTitle = document.getElementById("MyChartYTitle").value; 

     var lines = fulldata.split('$'); 
     var series = []; 
     var temp; 

     $.each(lines, function(lineno, line) { 
      temp = line.split('#'); 
      series.data = JSON.parse("[" + temp[1] + "]"); 
      series.name = temp[0]; 
      if (lineno == 0) { 
       series.color = "#FF0000"; 
      } 
      else { 
       series.color = "#058DC7"; 
      } 

      series.push({ name: series.name, data: series.data, color: series.color }); 
     }); 
     Options.series = series; 
     Options.title = { text: MyChartTitle, align: 'left', x: 90, y: 74, floating: true }; 
     Options.subtitle = { text: MyChartSubTitle, align: 'left', x: 120, y: 87, floating: true }; 
     Options.xAxis.title = { text: MyChartXTitle }; 
     Options.yAxis.title = { text: MyChartYTitle }; 
     Options.yAxis.tickInterval = 5; 
     Options.xAxis.tickInterval = 1; 
     Options.xAxis.min = 5; 
     Options.yAxis.min = 5; 
     var chart = new Highcharts.Chart(Options); 
     }); 
    }); 
} 

Answer 1

我會用Highcharts.Renderer，這和每一行的末尾添加系列名稱。例如，這在圖表呼叫後：

$(chart.series).each(function() 
{ 
    var point = this.points[this.points.length-1]; 
    chart.renderer.text(this.name, 
    point.plotX + chart.plotLeft + 5, 
    point.plotY + chart.plotTop + 5).attr(
    { 
     zIndex: 5 
    }).add(); 
}); 

生成此（小提琴here）：

Answer 2

這裏是使用下plotOptions的dataLabel特性的線的端部的標籤的一個例子。數據標籤可以按每個點附加，在這種情況下，只顯示最後一點。在這裏工作的小提琴：http://jsfiddle.net/gK52f/1/

只在一個點上啓用數據標籤的方法是傳遞數據數組中該點的附加屬性（在系列下）。我通過了這最後一點，並使用格式化程序返回系列名稱。這將覆蓋返回y值的默認格式化程序。

 { 
      dataLabels: { 
       enabled: true, 
       align: 'left', 
       crop: false, 
       formatter: function() { 
        return this.series.name; 
       }, 
       x: 5, 
       verticalAlign: 'middle' 
      }, 
      y: 54.4 
     }