Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > PieChart > クイックスタート |
このクイックスタートでは、PieChart ウィジェットを HTML プロジェクトに追加し、ウィジェットをカスタマイズする方法を学びます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンからリファレンスをコピーしてhead タグ内に貼り付けます
| リファレンス |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script> | |
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<div id="wijpiechart"></div> | |
ドロップダウンからスクリプトをコピーして 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: "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> | |
全て展開
すべて折りたたむ