色および輪郭の変更

クイックスタートの例を基に、seriesStyles オプションと fill、stroke、および stroke-width 属性を使用して、円グラフのセグメントの色および輪郭の色と太さを変更できます。詳細については、「スタイルオプション」を参照してください。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、円グラフのセグメントが縁取られるように、seriesStyles のストローク色を２番目の RGB 色とは異なる色に変更します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ header: { text: "Steam Mac Hardware Survey" }, seriesList: [{ label: "MacBook Pro", data: 46.78, offset: 15 }, { label: "iMac", data: 23.18, offset: 0 }, { label: "MacBook", data: 20.25, offset: 0 }, { label: "Mac Pro", data: 5.41, offset: 0 }, { label: "Mac Mini", data: 3.44, offset: 0 }], seriesStyles: [{ fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }] }); }); </script>

このスクリプトを再度変更し、円グラフのセグメントの色を変更します。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、seriesStyles の色を変更します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

関連トピック