javascript - グラフに最後の Y 軸の値を表示する

Question

日時の X 軸を持つスプライン グラフがあります。デフォルトで、最新/最後の Y 軸の値をグラフに表示したいと思います。

現在、すべての値がホバー時にツールチップに表示されるように設定されていますが、これを実現する方法がわかりません。これは日ごとの統計チャートであり、毎日更新されるため、ユーザーが Y 軸の最新の値をすばやく確認できると便利です。

ヒントや解決策は大歓迎です！

Answer 1

さて、dataLabels 属性とそのフォーマッタを使用してこれを行うことができました。

重要な部分は dataLabels オプションです。最初に有効に設定してから、シリーズの最後のポイントである場合にのみポイント値を返すようにフォーマッターを作成する必要があります。ラベルの x 値と y 値も必要に応じて編集する必要があります (グラフ コンテナーの幅/高さなどによって異なります)。

スニペットは次のとおりです。

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {
       dataLabels : {
                enabled : true,
                align : 'left',
                x : 3,
                y : 9,
                formatter : function() {
                    if (this.point.x == this.series.data[this.series.data.length - 1].x) {
                        return this.y;
                    } else {
                        return null;
                    }
                }
            }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]

});

私はまた、このソリューションのフィドルを作成しました: http://jsfiddle.net/tzEdX/