2017-07-19 22 views
0

私は日時x軸の折れ線グラフを持っています。ポイントの名前は現地時間に変換されます。ただし、目盛りはUTC深夜に配置されます。地方の深夜にそれらを置くにはどうすればいいですか?ハイチャートで現地時間でx軸にティックを表示するapi

私のローカルタイムはEDT(-04:00)です。したがって、およそ20:00に目盛りが表示されます。

var chart = Highcharts.chart('container', { 
    "chart": { 
    "type": "line", 
    "height": 300, 
    "marginLeft": 60, 
    "marginRight": 0, 
    "spacingLeft": 0, 
    "spacingRight": 0, 
    "style": { 
     "fontSize": 14 
    }, 
    "zoomType": "x" 
    }, 
    "tooltip": { 
    "pointFormat": "{point.y}", 
    "style": { 
     "fontSize": 14 
    } 
    }, 
    "exporting": { 
    "enabled": false 
    }, 
    "title": { 
    "text": "", 
    "style": { 
     "display": "none" 
    } 
    }, 
    "subtitle": { 
    "text": "", 
    "style": { 
     "display": "none" 
    } 
    }, 
    "legend": { 
    "enabled": "false" 
    }, 
    "xAxis": { 
    "type": "datetime", 
    "labels": { 
     "enabled": true, 
     "style": { 
     "fontSize": "12px" 
     } 
    }, 
    "title": { 
     "text": null 
    }, 
    "minTickInterval": 86400000 
    }, 
    "plotOptions": { 
    "line": { 
     "color": "#33aaee", 
     "step": "true", 
     "lineWidth": 1 
    } 
    }, 
    "credits": { 
    "enabled": false 
    }, 
    "series": [{ 
    "data": [{ 
     "x": 1499935040582, 
     "y": 600.8919674194846, 
     "name": "Jul 13, 2017 4:37 AM" 
    }, { 
     "x": 1500069665426, 
     "y": 600.3026594460489, 
     "name": "Jul 14, 2017 6:01 PM" 
    }, { 
     "x": 1500133689471, 
     "y": 600.7274040373635, 
     "name": "Jul 15, 2017 11:48 AM" 
    }, { 
     "x": 1500197550895, 
     "y": 600.1197607401385, 
     "name": "Jul 16, 2017 5:32 AM" 
    }, { 
     "x": 1500224766324, 
     "y": 600.2311428390589, 
     "name": "Jul 16, 2017 1:06 PM" 
    }, { 
     "x": 1500247544551, 
     "y": 600.5511455212492, 
     "name": "Jul 16, 2017 7:25 PM" 
    }, { 
     "x": 1500282216949, 
     "y": 600.2677789206001, 
     "name": "Jul 17, 2017 5:03 AM" 
    }, { 
     "x": 1500285249151, 
     "y": 600.3165520296044, 
     "name": "Jul 17, 2017 5:54 AM" 
    }, { 
     "x": 1500472917987, 
     "y": 600.6858600814295, 
     "name": "Jul 19, 2017 10:01 AM" 
    }, { 
     "x": 1500479945476, 
     "y": 600.6974345877289, 
     "name": "Jul 19, 2017 11:59 AM" 
    }], 
    "showInLegend": false, 
    "allowPointSelect": true 
    }] 
}); 

ここにこれを示すフィドルです。 Highcharts fiddle

+0

ローカル時間は、global.useUTCをfalseに設定します。詳細とオプションについては、APIを参照してください。http://api.highcharts.com/highcharts/global.useUTC – morganfree

答えて

0

は私の問題への答えを見つけて、あなたのローカルタイムゾーンとスケールであなたのチャートを保持しなければなりません。だから、基本的に、私は一瞬の定義に「(真).utc」を追加

chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) }); 

:私は時間のデータをフォーマットするmoment.jsを使用していますので、私はからそれを変更:

chart.series[0].data.push({ x: moment(grp.Time).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) }); 

へx値の場合

0

エポックをjavascriptの日付に変更します[新しい日付(エポック)]これは、日付/時刻フィールドがUTCではなく現地時間で表示されます。

"series": [{ 
    "data": [{ 
     "x": new Date(1499935040582), 
     "y": 600.8919674194846 
    }, { 
     "x": new Date(1500069665426), 
     "y": 600.3026594460489 
    }, { 
     "x": new Date(1500133689471), 
     "y": 600.7274040373635 
    }, { 
     "x": new Date(1500197550895), 
     "y": 600.1197607401385 
    }, { 
     "x": new Date(1500224766324), 
     "y": 600.2311428390589 
    }, { 
     "x": new Date(1500247544551), 
     "y": 600.5511455212492 
    }, { 
     "x": new Date(1500282216949), 
     "y": 600.2677789206001 
    }, { 
     "x": new Date(1500285249151), 
     "y": 600.3165520296044 
    }, { 
     "x": new Date(1500472917987), 
     "y": 600.6858600814295 
    }, { 
     "x": new Date(1500479945476), 
     "y": 600.6974345877289 
    }], 

これは

+0

これを変更せずに使用するためにjsfiddleを更新しました。 7月15日の深夜に2番目のポイントを作ったので、今度は4時間先になっていることがわかります(私のタイムゾーンで)。私はまた、global.useUTCをmorganfreeのコメントごとにfalse(そしてtrue)に設定しようとしましたが、違いはありませんでした。 http://jsfiddle.net/8vwdd74o/2/ –

+0

あなたはあなたのフィドルも更新していないデータシリーズから名前プロパティを削除する必要があります。 – Tik

関連する問題