Линейный график Highcharts

Question

Я пытаюсь построить диаграмму i.e 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

Вот пример метки на конце линии, используя свойство dataLabel под plotOptions , Метка данных может быть прикреплена на основе каждой точки, в этом случае просто покажите ее для последней точки. Рабочая скрипка здесь: 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 
     }