Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > PieChart > 操作手順 > 円グラフセグメントでグラデーションの変更 |
クイックスタートの例を基に、seriesStyles オプションと fill、stroke、および stroke-width 属性を使用して、円グラフのセグメントの色とグラデーションおよび輪郭の色と太さを変更できます。詳細については、「スタイルオプション」を参照してください。
ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
スクリプト |
コードのコピー |
---|---|
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2"); } }, 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: "270-rgb(12,133,240)-rgb(128,19,128)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "180-rgb(143,51,140)-rgb(33,130,13)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "270-rgb(8,34,201)-rgb(196,98,172)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "270-rgb(11,125,25)-rgb(6,6,125)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "180-rgb(63,15,77)-rgb(12,159,250)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }] }); }); </script> |