Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > BarChart > クイックスタート |
このクイックスタートでは、Web ページの作成、wijbarchart ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンからリファレンスをコピーして head タグ内に張り付けます
| リファレンス |
コードのコピー |
|---|---|
<!--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" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <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" } }); </script> | |
ドロップダウンからマークアップをコピーして body タグ内に張り付けます
| マークアップ |
コードのコピー |
|---|---|
<div id="wijbarchart" style="width: 400px; height: 300px"> </div> | |
ドロップダウンからスクリプトをコピーして head タグ内に張り付けます
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijbarchart"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ autoResize: "true", axis: { y: {text: "Total Hardware"}, x: {text: ""} }, hint: { content: function () {return this.data.label + '\n ' + this.y + '';} }, header: {text: "Console Wars"}, seriesList: [{ label: "US", legendEntry: true, data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] } }], seriesStyles: [{fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8}], seriesHoverStyles: [{ "stroke-width": "1.5", opacity: 1}] }); }); }); </script> | |
全て展開
すべて折りたたむ