WordPressプラグインでレーダーチャートを表示させてみました。
以下、ざっくりとした使い方・色カスタマイズのメモです。
▼ 公式ページ
amCharts: Charts and Maps
Allows to easily add interactive charts and maps using amCharts libraries.
ja.wordpress.org
スポンサーリンク
「どんな感じになんの？」
項目数や数値、テキストは変更可能。
プロフィールページ用につかいました。
▼ ほしみについて
ほしみ（hoshimi12）
hoshimi12.com
「使い方ざっくり教えて！」
- プラグインインストール
- ダッシュボード左の「Charts & Maps」⇒「Add New」クリック
- ダッシュボード左の「Add New」以下の「+Radar」クリック
- タイトル入力
- JavaScriptのテキストと数値を変更
- 公開ボタン
- ショートコードを記事に
基本的にはJavaScriptの「direction」「value」部分を任意テキストと数値に変更すればOK。項目数をへらすこともふやすこともできる。
もし最大direction値を「10」にしたら、チャートの最大メモリは「12」になるので注意。最大direction値を「9.9」とかにしたらちゃんと最大メモリは「10」ピッタシになってくれる。
「色のカスタマイズは？」
自分はCSSで色カスタマイズしました。
/* レーダーチャートamCharts4 */
g tspan{
fill: #e8e8e8;
}
g path{
stroke: #fff;
stroke-opacity: 0.25
}
/* （ここまで）レーダーチャート */
「g tspan」で文字色調整、「g pass」で線の色と透明度調整。
黒背景のサイトなので、黒文字黒線から白文字白線に変更しました。
サイト全体の追加CSSではなく、プラグインをつかって記事ごとのCustom CSSに追加すると競合の心配がないかも。
JavaScriptやSVGにくわしいヒトはもっと詳細にカスタマイズできるとおもいます。
まとめ「文字と線の色くらいなら」
中身の水色部分のカスタマイズ方法がわからなかったんですが、違和感はないのでそのままにしました。（gタグだけにfillすると全部色かわっちゃう）
amChartsは有名なチャートライブラリらしいので、それにくわしいヒト向けのプラグインという印象でした。かなりシンプル。詳細なカスタマイズがいらないならカンタンに使えます。
今回は以上です。よきWordPressライフを────ではまた🐺
▼ 高速でWordPress動かしたいなら
