実現したいこと
ブラウザ側で取得したjsonデータをplotly.jsで時系列表示したいです。
発生している問題
横軸の日時が正確に表示されません。
元のデータは2009-01-01から1日刻みのデータなのですが、ブラウザには1970-01-01(UNIX時間の開始時刻?)から、1μs刻みで表示されます。元のデータの日付書式(ブラウザで受け取っている書式)は、2009-01-01T00:00:00.000Zのstring型です。
コード
Javascript
1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="content-type" content="text/html" ; charset="UTF-8"> 5 <title>sample data</title> 6 <link rel='stylesheet' href='/stylesheets/style.css'/> 7 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 8</head> 9<body> 10<p id="date"></p> 11<p id="dateformat"></p> 12<p id="date_data"></p> 13<div id="tester" style="width: 1200px; height: 600px;"></div> 14 15<script> 16 window.onload = () => { 17 18 let date = new Date(); 19 document.getElementById("date").innerHTML = date; 20 21 fetch('/resdata').then((response) => response.json()) 22 .then((data) => { 23 24 let sample_data = []; 25 let date_data = []; 26 27 for (let i = 0; i < data.content.length; i++) { 28 29 sample_data.push(data.content[i].sample); 30 <!-- 日時データの変換 --> 31 date_data.push(data.content[i].datetime.slice(0, -14)); 32 33 } 34 <!-- 以下、plotly描画部分 --> 35 let plot_data = [{ 36 X: date_data, 37 y: diff_data, 38 type: 'lines', 39 }]; 40 41 let layout = { 42 title: 'Sample data', 43 xaxis: { 44 title: 'Date', 45 type: 'date', 46 }, 47 yaxis: { 48 title: 'Sample', 49 autorange: true, 50 type: 'linear', 51 }, 52 }; 53 54 Plotly.newPlot('tester', plot_data, layout); 55 56 <!-- データ確認部分 --> 57 document.getElementById('dateformat').innerHTML = typeof date_data[0]; 58 document.getElementById('date_data').innerHTML = date_data[0]; 59 }); 60 61 }; 62</script> 63</body> 64</html>
試したこと
上記コードは、公式の以下のページを参考にしています。こちらの記述方法が、dataとlayoutを分けおり、さらにx軸とy軸など各設定項目も分けて記述していて分かりやすいので、こちらの記述方法を使っていきたいと思っています。
公式:Candlestick-charts
一方で、同じ公式でも、以下のページの方法だと上手くいくことは確認しました。しかし、こちらの方法はdataとlayoutをまとめて記述していて、設定項目が増えてくると分かりにくくなるので使いたくありません。
公式:Getting started
途中で、ブラウザで受け取ったデータから日付データを抜き出すときに公式と同じ書式(2009-01-01)になるように.slice()していますが、最後の行の.innerHTMLで日付データの型と中身を表示させて、正確に変換されているか確認しています。
その他、Date.parse()などを使用して型を変換したりもしましたが、上手くいきませんでした。
補足情報
OS:MacOS 10.14.6
IDE:WebStorm 2019.2.4
ブラウザ:google Chrome Version 78.0.3904.97
以上、よろしくお願いします。
あなたの回答
tips
プレビュー