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

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

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

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijscatterchartDefault").wijscatterchart({ header: {text: "Ice Cream Sales vs Temperature"}, axis: { y: { text: "Sales (US$)" }, x: { text: "Temperature (\u00B0F)" } }, legend: {visible: false}, hint: { content: function () { return this.x + '\u00B0, ' + '$' + this.y } }, seriesList: [ { data: { x: [58, 62, 53, 59, 65, 72, 67, 77, 74, 65, 73, 63], y: [215, 325, 185, 332, 406, 522, 412, 614, 544, 421, 445, 408] } } ] }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijscatterchartDefault").wijscatterchart({
            header: {text: "Ice Cream Sales vs Temperature"},
            axis: {
                y: {
                    text: "Sales (US$)"
                },
                x: {
                    text: "Temperature (\u00B0F)"
                }
            },
            legend: {visible: false},
            hint: {
                content: function () {
                    return this.x + '\u00B0, ' + '$' + this.y
                }
            },
            seriesList: [
                {
                    data: {
                        x: [58, 62, 53, 59, 65, 72, 67, 77, 74, 65, 73, 63],
                        y: [215, 325, 185, 332, 406, 522, 412, 614, 544, 421, 445, 408]
                    }
                }
            ]
        });
    });  
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。データポイントにマウスポインタを合わせると、hint オプションで定義したツールチップテキストが表示されます。

関連トピック

参照