簡単コピペ!WordPressで綺麗なレーダーチャートを埋め込む方法




WordPressで綺麗なレーダーチャートを埋め込みたい!

どうも、Linです。水分蒸発させてます。

 

WordPressでブログを書いていると、時々、

「レーダーチャートを埋め込みたいな?」

という気分になるときありますよね。

わかります、その気持ち。

 

そんなときにオススメなのが、

amChartのコードをそのままコピペする

ということです。

 

Radar Chart

 

もうね、難しくてわからんw

 

こちらのページから、レーダーチャートのコードを閲覧できます。

こいつをWordPress投稿画面の「テキスト」でコピーアンドペースト。

 

<!-- Styles -->
<style>
body { background-color: #3f3e3b; color: #fff; }
#chartdiv {
  width: 100%;
  height: 500px;
}				
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "radar",
  "theme": "chalk",
  "dataProvider": [ {
    "country": "Czech Republic",
    "litres": 156.9
  }, {
    "country": "Ireland",
    "litres": 131.1
  }, {
    "country": "Germany",
    "litres": 115.8
  }, {
    "country": "Australia",
    "litres": 109.9
  }, {
    "country": "Austria",
    "litres": 108.3
  }, {
    "country": "UK",
    "litres": 99
  } ],
  "valueAxes": [ {
    "axisTitleOffset": 20,
    "minimum": 0,
    "axisAlpha": 0.15
  } ],
  "startDuration": 2,
  "graphs": [ {
    "balloonText": "[[value]] litres of beer per year",
    "bullet": "round",
    "lineThickness": 2,
    "valueField": "litres"
  } ],
  "categoryField": "country",
  "export": {
    "enabled": true
  }
} );
</script>

<!-- HTML -->
<div id="chartdiv"></div>

 

すると、こんな感じのレーダーチャートが完成するはず。

 

 





 

 

あとはコードの項目や数値を変更してやると、お望みのレーダーチャートができることでしょう。

レーダーチャートが埋め込めなさすぎて、悩んでいる方はよかったら試してみてください。

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍