Wijmo UI for the Web
ドーナツ円グラフの作成
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > CompositeChart > 操作手順 > ドーナツ円グラフの作成 |
クイックスタートの例を基に、ドーナツ円グラフを作成できます。この特殊なグラフのタイプは、関連するデータを含む２つの円グラフを組み合わせます。これらの円グラフは同一の中心点を共有するので、正しく重なり合います。
 |
メモ：大きい方の円グラフのデータは、各ブラウザの使用率を表します。小さい方の円グラフのデータは、各ブラウザのバージョンごとの使用率を表示します。 |
ドロップダウンして<head>タグ内にスクリプトを貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: {gridMajor: {visible: false}, textVisible: false}, x: {visible: false, textVisible: false} }, animation: {enabled: false }, chartLabelStyle: {fill: "#fff"}, hint: {content: function () {return this.label + ' ' + this.y + '';} }, header: {text: "Browsers"}, seriesList: [ { type: "pie", legendEntry: true, center: { x: 400, y: 250 }, radius: 200, data: [ {label: "Chrome", legendEntry: true, data: 38, offset: 0}, {label: "Firefox", legendEntry: true, data: 36, offset: 0}, {label: "IE", legendEntry: true, data: 13, offset: 0}, {label: "Safari", legendEntry: true, data: 8, offset: 0}, {label: "Other", legendEntry: true, data: 5, offset: 0} ] }, { type: "pie", legendEntry: true, center: { x: 400, y: 250 }, radius: 100, data: [ {label: "15", //Chrome legendEntry: false, data: 26, offset: 0 }, { label: "14", //Chrome legendEntry: false, data: 8, offset: 0 }, { label: "", //Chrome legendEntry: false, data: 4, offset: 0 }, { label: "7", //Firefox legendEntry: false, data: 20, offset: 0 }, { label: "8", //Firefox legendEntry: false, data: 10, offset: 0 }, { label: "", //Firefox legendEntry: false, data: 6, offset: 0 }, { label: "9", //IE legendEntry: false, data: 6, offset: 0 }, { label: "8", //IE legendEntry: false, data: 5, offset: 0 }, { label: "", //IE legendEntry: false, data: 2, offset: 0 }, { label: "5", //Safari legendEntry: false, data: 5, offset: 0 }, { label: "", //Safari legendEntry: false, data: 3, offset: 0 }, { label: "", legendEntry: false, data: 5, offset: 0 }] }], seriesStyles: [ {fill: "180-#B800CC-#4B00CC", stroke: "#4B00CC", "stroke-width": 1.5, opacity: 1 }, {fill: "270-#7AADFF-#C37AFF", stroke: "#C37AFF", "stroke-width": 1.5, opacity: 1 }, {fill: "180-#0099cc-#B0EBFF", stroke: "#2889aa", "stroke-width": 1.5, opacity: 1 }, {fill: "270-#2200cc-#8C7BE3", stroke: "#3e28aa", "stroke-width": 1.5, opacity: 1 }, {fill: "180-#6A399E-#9E399B", stroke: "#9E399B", "stroke-width": 1.5, opacity: 1 }, {fill: "#E2D1FF", stroke: "none", opacity: 0.5 }, { fill: "#D1E2FF", stroke: "none", opacity: 0.5 }, { fill: "#D6D1FF", stroke: "none", opacity: 0.5 }, { fill: "#FFD1D1", stroke: "none", opacity: 0.5 }, { fill: "#D1FFE1", stroke: "none", opacity: 0.5 }, { fill: "#F7FFD1", stroke: "none", opacity: 0.5 }, { fill: "#FFF1D1", stroke: "none", opacity: 0.5 }, { fill: "#FFD1D1", stroke: "none", opacity: 0.5 }, { fill: "#BDF7FF", stroke: "none", opacity: 0.5 }, { fill: "#BDC6FF", stroke: "none", opacity: 0.5 }, { fill: "#FFF0BD", stroke: "none", opacity: 0.5 }, { fill: "#F4BDFF", stroke: "none", opacity: 0.5 }], seriesHoverStyles: [{ fill: "180-#B800CC-#4B00CC", stroke: "#4B00CC", "stroke-width": 2, opacity: 1 }, { fill: "180-#ff6600-#cb6928", stroke: "#cb6928", "stroke-width": 2, opacity: 1 }, { fill: "180-#0099cc-#2889aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1 }, { fill: "180-#2200cc-#3e28aa", stroke: "#3e28aa", "stroke-width": 2, opacity: 1 }, { fill: "180-#cccccc-#dddddd", stroke: "#dddddd", "stroke-width": 2, opacity: 1 }, { fill: "#FFD1E4", stroke: "none", opacity: 0.8 }, { fill: "#D1E2FF", stroke: "none", opacity: 0.8 }, { fill: "#D6D1FF", stroke: "none", opacity: 0.8 }, { fill: "#FFD1D1", stroke: "none", opacity: 0.8 }, { fill: "#D1FFE1", stroke: "none", opacity: 0.8 }, { fill: "#F7FFD1", stroke: "none", opacity: 0.8 }, { fill: "#FFF1D1", stroke: "none", opacity: 0.8 }, { fill: "#FFD1D1", stroke: "none", opacity: 0.8 }, { fill: "#BDF7FF", stroke: "none", opacity: 0.8 }, { fill: "#BDC6FF", stroke: "none", opacity: 0.8 }, { fill: "#FFF0BD", stroke: "none", opacity: 0.8 }, { fill: "#F4BDFF", stroke: "none", opacity: 0.8 }] }); }); }); </script> | |
全て展開
すべて折りたたむ