【WordPressでレーダーチャート】プラグイン「amCharts: Charts and Maps」の色カスタマイズメモ【CSSで】

 

WordPressプラグインでレーダーチャートを表示させてみました。


以下、ざっくりとした使い方・色カスタマイズのメモです。

 

▼ 公式ページ

amCharts: Charts and Maps
Allows to easily add interactive charts and maps using amCharts libraries.

 

スポンサーリンク

「どんな感じになんの?」

 

 

項目数や数値、テキストは変更可能。

 

プロフィールページ用につかいました。

 

▼ ほしみについて

ほしみ(hoshimi12)

 

 

「使い方ざっくり教えて!」

 

  1. プラグインインストール
  2. ダッシュボード左の「Charts & Maps」⇒「Add New」クリック
  3. ダッシュボード左の「Add New」以下の「+Radar」クリック
  4. タイトル入力
  5. JavaScriptのテキストと数値を変更
  6. 公開ボタン
  7. ショートコードを記事に

 

基本的には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動かしたいなら

WordPress
役立つ情報はシェアしよう
執筆者をフォローしよう
おすすめレンタルサーバー
Mixhost

このサイトで利用中。初期費用なし、お手頃価格でWordPressを高速化。クラウド型だからプラン変更も即時&ラクチン。アダルトOKなので同人サイトも自由につくれます。

エックスサーバー

初心者のWordPress運用といえばコレみたいな定番サーバー。性能はMixHostと近いですが、初期費用と長期契約の面でややコスト増。使用者が多いので検索するとほしい情報がすぐみつかるのは助かります。

ConoHa WING

「最速」ならコレ。初期費用なしですが、やや月額高め。徹底して速さを求めるガチ勢むけ。

StarGazer – スタゲ
タイトルとURLをコピーしました