折线图Highcharts

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
       }