Wijmo UI for the Web
マークアップとスクリプティング
全て展開全て展開
すべて折りたたむすべて折りたたむ

バブルグラフは、次の例に示すように、単一の <div> 要素を使用して作成されます。

マークアップ
コードのコピー
<div id="wijbubblechart" style="width: 400px; height: 300px"></div>

次のようなコードで wijbubblechart を初期化できます。

スクリプト
コードのコピー
<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.wijbubblechart"], function () {
$(document).ready(function () {
    $("#wijbubblechart").wijbubblechart({
        showChartLabels: false,
        axis: {
            y: {text: "Life Expectancy"},
            x: {text: "Income"}
        },
        hint: {
            content: function () {return this.data.label;}
        },
        header: {text: "Wealth and Health of Nations - 2010"},
        seriesList: [
        {
            label: "China",
            data: { y: [73], x: [7931], y1: [1340] },
            markers: {type: "tri"}
        }, {
            label: "India",
            data: { y: [65], x: [2972], y1: [1150] },
            markers: {type: "diamond"}
        }, {
            label: "USA",
            data: { y: [78], x: [42066], y1: [309] },
            markers: {type: "circle"}
        }, {
            label: "Japan",
            data: { y: [83], x: [30866], y1: [126] },
            markers: {type: "cross"}
        }, {
            label: "Russia",
            data: { y: [69], x: [14318], y1: [140] },
            markers: {type: "invertedTri"}
        }, {
            label: "Congo",
            data: { y: [48], x: [374], y1: [72] },
            markers: {type: "box"}
        }]
    });
});
});
</script>

ここで取り上げたマークアップとスクリプトは、次のようなライブグラフを生成します。各データポイントの上にマウスポインタを置くとその要素のヒントが表示され、凡例項目をクリックするとグラフのその系列が切り替わります。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.