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