マークアップとスクリプティング

wijpiechart ウィジェットの HTML マークアップは次のようになります。

マークアップ	コードのコピー
<div id="wijpiechart"></div>

次のようなjQuery スクリプトで wijpiechart を初期化できます。

スクリプト	コードのコピー
<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: "Popularity of American Sports" }, seriesList: [{ label: "Pro Football", data: 34, offset: 15 }, { label: "Baseball", data: 16 }, { label: "College Football", data: 11 }, { label: "Auto Racing", data: 8 }, { label: "Men's Pro Basketball", data: 7 }, { label: "Hockey", data: 5 }, { label: "Men's College Basketball", data: 3 }] }); }); </script>

スクリプト

コードのコピー

<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: "Popularity of American Sports"
        },
        seriesList: [{
            label: "Pro Football",
            data: 34,
            offset: 15
        }, {
            label: "Baseball",
            data: 16
        }, {
            label: "College Football",
            data: 11
        }, {
            label: "Auto Racing",
            data: 8
        }, {
            label: "Men's Pro Basketball",
            data: 7
        }, {
            label: "Hockey",
            data: 5
        }, {
            label: "Men's College Basketball",
            data: 3
        }]
    });
});
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。

関連トピック

参照