1

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

2 回答 2

3

下面是使用 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
       }
于 2013-01-29T16:48:46.493 回答
3

我会为此使用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();
});

产生这个（在这里小提琴）：

在此处输入图像描述

于 2012-05-19T21:36:56.030 回答