【WordPress】plotly.jsでブログに折れ線グラフを描く方法【デモあり】

WordPressでPlotly.jsを使ってスマートな折れ線グラフを描きたいことってありますよね?

過去記事で、Plotly.jsで棒グラフを描く方法を紹介しましたが、今回はPlotly.jsを使って、WordPressのブログ上に折れ線グラフを描く方法を解説します。

 

【過去記事はこちら】

関連記事

WordPressできれいな棒グラフを描きたいことってありますよね? 前回は、Javascriptのグラフライブラリchart.jsを紹介しましたが、今回は同様にJavascriptのグラフライブラリのplotly.jsを使って、Wo[…]

 

結論、Plotly.jsを使うと、特にWordPressのプラグイン無しで、次のような折れ線グラフを描くことができます。

 

【デモ画面】

Plotly.jsでブログに折れ線グラフを描く方法

 

【手順1】WordPressの 投稿を編集 画面で、テキストエディタを開く。

 

【手順2】以下のコードを記述します。

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph" style="width: 100%; height: 400px;"></div>
<script>
  // Xの値を書く
  var x = [0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0];
  // Yの値を書く
  var y = [ '0.055','0.118','0.121','0.068','0.083','0.060','0.067',
    '0.155','0.140','0.101', '0.041'];
  var data = [{ name: 'sample', x : x, y : y, type: 'line'}];
  var layout = { legend : { showlegend : false } };
  Plotly.newPlot("graph", data, layout);
</script>

 

 

【手順3】投稿をプレビュー、または、公開して見てみると、グラフが表示されます!

 

 

以上で完了です。

Plotly.jsのグラフ作成で参考にしたサイト

以下のサイトの解説を参考にさせていただきました。
よろしければ、こちらのサイトも見ていただくとコードの内容がより分かると思います。
Qiita

plotly.jsの使い方を勉強したのでまとめます https://plotly.com/javascript/ 1…

まとめ

この記事では、WordPressでPlotly.jsを使って折れ線グラフを描画する方法を解説しました。

みなさんもPlotly.jsを使って、パパっとスマートな折れ線グラフを作ってみてはいかがでしょうか。

 

最後まで読んでいただき、ありがとうございます。
今回は以上です。