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

2022-03-09
2022-03-11
AI・プログラミング

AI・プログラミング

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

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

【過去記事はこちら】

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

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

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

【デモ画面】

1 Plotly.jsでブログに折れ線グラフを描く方法
2 Plotly.jsのグラフ作成で参考にしたサイト
3 まとめ

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】投稿をプレビュー、または、公開して見てみると、グラフが表示されます！