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
自称、学習系ブロガー。自ら学び、学んだことをわかりやすく楽しくアウトプットすることを心がけています。本ブログではプログラミング、フリーランスの税金、Webマーケティング、副業を勉強していきます。
好きな映画は「メリーに首ったけ」
>>Twitterをフォローする
