web-dev-qa-db-ja.com

ハイチャートツールチップをカスタマイズして日時を表示する

このグラフを表示する予定のプロジェクトを開発しています： http://jsfiddle.net/Kc23N/

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

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

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

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

ありがとう

javascriptjquerychartshighchartstooltip
24
SkyNet_citizen

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.';
            }
        }

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

私はこれをしましたあなたの例 code

54
rscnt

フォーマット日付をカスタマイズするには、ツールチップでxDateFormatを使用する必要があります
http://api.highcharts.com/highcharts#tooltip.xDateFormat

sample:
tooltip: {
           xDateFormat: '%Y-%m-%d'
         },
49
Quy Le

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

例：

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'
17
Wang Xiao

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

参照用の 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.';
                }
            }
12
Gopinagh.R