29

このグラフを表示することが期待されるプロジェクトを開発しています: http://jsfiddle.net/Kc23N/

ポイント（ツールチップ）をクリックすると、ミリ秒単位の値ではなく、わかりやすい日付が表示されます。

このコードを変更する必要があると思います：

tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x} date, {point.y} Kg',                        
}

私はどのように行いますか？どんな種類の助けも大歓迎です。

ありがとう

4

6 に答える 6

59

moment.jsを使用してフォーマットされた値を取得できますが、Highcharts には、Highcharts でより慣用的な独自の日付フォーマット機能があります。次のように、highcharts コンストラクターのツールチップ オプションにアタッチできます。

        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%e - %b - %Y',
                                          new Date(this.x))
                + ' date, ' + this.y + ' Kg.';
            }
        }

日付に必要なオプションを含むdateTimeLabelFormatsオブジェクトを xAxis の下に追加することもできます。

私はあなたのコードでこの例を行いました

于 2013-06-11T01:38:47.607 に答える
20

{value:%Y-%m-%d}テンプレートフィルターを使用できます。

例:

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'
于 2015-10-19T01:36:26.177 に答える
14

tooltip formatter を使用して、ツールチップで書式設定された日付を返す必要があります。

参考までに、ツールチップ フォーマッタ APIを次に示します。

日付部分をフォーマットするには、次を利用できますHighcharts.dateFormat()

この形式は、PHP の strftime関数の形式のサブセットです。

PHP's strftimeより多くの日付形式を参照することもできます。

ツールチップを以下のようにフォーマットすることができました。

  tooltip: {
                formatter: function() {
                    return  '<b>' + this.series.name +'</b><br/>' +
                        Highcharts.dateFormat('%e - %b - %Y',
                                              new Date(this.x))
                    + '  <br/>' + this.y + ' Kg.';
                }
            }
于 2013-06-11T10:08:12.057 に答える