WordPressで綺麗なレーダーチャートを埋め込みたい！
どうも、Linです。水分蒸発させてます。
WordPressでブログを書いていると、時々、
「レーダーチャートを埋め込みたいな？」
という気分になるときありますよね。
わかります、その気持ち。
そんなときにオススメなのが、
amChartのコードをそのままコピペする
ということです。
もうね、難しくてわからんw
こちらのページから、レーダーチャートのコードを閲覧できます。
こいつをWordPress投稿画面の「テキスト」でコピーアンドペースト。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!-- 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
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている
