6

気温、風、気圧、降雨量をプロットしたハイチャートグラフがあります。

ここで見ることができますhttp://www.dmjsystems.co.uk/weather/forecast.php

共有ツールチップを使用していますが、最大雨量は雨の積み上げ列の最小値と最大値の合計であるという複雑さが追加されています。現在、コードはシリーズベースのサフィックスを無視しており、個々の小数点以下を機能させることができませんでした（つまり、すべて小数点以下3桁が表示されます）。

各アイテムには、異なる接尾辞（Temp =（度記号）C、Wind = mph、Pressure = mb、Rain = in）と小数点以下の桁数（Wind = none、Temp = 1、Pressure = 1、Rain = in）があります。 3）。

私は現在、次のようにコード化された一般的なツールチップを使用しています。

    tooltip: { shared : true,
            formatter: function() {
            return '<span style="color:#039;font-weight:bold">' + Highcharts.dateFormat('%A' + ', ' + '%b %d' + ', ' + '%H' + ':' + '00',this.x) + '</span><br/>' +
                       this.points.map(function(point, idx) {
                           return '<span style="color:' + point.series.color + '">' + point.series.name +
                                  '</span>: <span style="color:#669;font-weight:bold">' +
                                  Highcharts.numberFormat((idx == 0) ? point.total : point.y,3) +
                                  '</span>';
                       }).join('<br/>');
            }
    },

しかし、これを（共有：trueは別として）pointFormat（特に接尾辞を正しく指定できると思うtooltip.ySuffix）とvalueDecimalsを使用して各シリーズの小数点を設定するシリーズベースのツールチップに移動する必要があると思いますが、これらの関数を使用するコードの例が見つかりません。

また、一般的なツールチップから離れるとすぐに、スタックされた列の合計を機能させることができません。

誰かが私を正しい方向に向けることができれば、私はそれをいただければ幸いです。

4

3 に答える 3

6

各シリーズにツールチップ オプションを簡単に追加できます。次のリンク
でオプションを確認できます。 この方法では、各シリーズのポイントをフォーマットする必要はありません。

series: [{
    name: 'USD',
    data: yourData,
    tooltip: {
        ySuffix: ' USD',
        yDecimals: 4
    }
}, {
    name: 'EUR',
    data: yourData,
    tooltip: {
        yPrefix: 'EUR ',
        yDecimals: 1
    }
}]

デモ

参考：

于 2013-03-20T03:21:39.943 に答える
2

共有ツールチップを使用して、接頭辞、接尾辞などを設定することができます。言葉遣いについて考えるだけです。yprefix などを使用するのではなく、valuePrefix を使用します

データの系列ごとに設定します

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],
        type: 'column'

    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        tooltip: {
    valuePrefix: ' USD'
}}],

あなたはそれを示すフィドルを見ることができます

于 2013-11-06T12:50:28.853 に答える
2

チャートのツールチップにカスタム フォーマッタを指定し、系列のツールチップに値の接尾辞とその他のオプションを指定して、チャートのツールチップ フォーマッタ関数でそれらのオプションを参照できます。例えば：

$('XXXX').highcharts({
	...
	tooltip: {
                formatter: function() {
                    var text = "";
                    $.each(this.points, function(index) {
                        text += '<br/><b>' + this.series.name + ":</b> "+ this.y+" "+this.series.tooltipOptions.valueSuffix;
                    });
                    return text;
                },
                shared: true
            },
	...
});

...

chart.addSeries({
            ...
            tooltip: {
                valueSuffix: ' '+seriesUnit,
                valueDecimals:2
            },
            ...
        });

于 2014-10-28T15:15:33.977 に答える