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のグラフ作成で参考にしたサイト
以下のサイトの解説を参考にさせていただきました。
よろしければ、こちらのサイトも見ていただくとコードの内容がより分かると思います。
よろしければ、こちらのサイトも見ていただくとコードの内容がより分かると思います。
まとめ
この記事では、WordPressでplotly.jsを使って棒グラフを描画する方法を解説しました。
WordPressとplotly.jsを使って、リッチなグラフを作ってみてはいかがでしょうか。
最後まで読んでいただき、ありがとうございます。
今回は以上です。
