꺾은 선형 차트 하이 차트

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 
     }