質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2823閲覧

plotlyで横軸の日時を正確に表示したい

pierogi.user

総合スコア19

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/18 07:43

実現したいこと

ブラウザ側で取得した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

以上、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問