Wijmo UI for the Web
ドーナツグラフの作成
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > PieChart > 操作手順 > ドーナツグラフの作成 |
クイックスタートの例を基に、innerRadius オプションを使用して、円グラフをドーナツグラフに変更できます。
ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, innerRadius: 40, 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: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5 }, { fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5 }, { fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5 }, { fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5 }, { fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5 }] }); }); </script> | |
全て展開
すべて折りたたむ