折线图 Highcharts答案

【问题标题】：Line Chart Highcharts折线图 Highcharts
【发布时间】：2012-05-19 18:49:31
【问题描述】：

我正在尝试折线图，即 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);
        });
    });
}

【问题讨论】：

你有什么问题？你没有系列名吗？你有两个吗？你不知道怎么做吗？
我有五个系列的系列名称，但是当图表呈现时..我想在每个系列的最后一点显示系列名称。而且我不明白，该怎么做..

标签： highcharts

【解决方案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）：

【讨论】：

【解决方案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
       }

【讨论】：