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

WordPressできれいな棒グラフを描きたいことってありますよね?

前回は、Javascriptのグラフライブラリchart.jsを紹介しましたが、今回は同様にJavascriptのグラフライブラリのplotly.jsを使って、WordPressのブログ上に棒グラフを描く方法を解説します。

 

前回の記事はこちら。

関連記事

WordPressできれいなグラフを描きたいことってありますよね? この記事では、Javascriptのグラフライブラリのchart.jsを使って、WordPressのブログ上に棒グラフを描く方法を解説します。 結論、プラグイン[…]

 

結論、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: 'bar'}];
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を使って棒グラフを描画する方法を解説しました。
WordPressとplotly.jsを使って、リッチなグラフを作ってみてはいかがでしょうか。

 

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