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/

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 に答える