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

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

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

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { var xArray = [100, 200, 400, 800, 1000]; var yArray = [-20, 0, 30, -50, 100]; $("#wijlinechart").wijlinechart({ axis: { y: { origin: 0 } }, showChartLabels: false, header: { text: "My Stocks" }, hint: { content: function () { return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + ''; }, contentStyle: {"font-size": 10}, offsetY: -10 }, legend: {visible: false}, seriesList: [ { label: "My Stocks", legendEntry: true, data: { x: xArray, y: yArray }, markers: { visible: true, type: "circle" } } ] }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        var xArray = [100, 200, 400, 800, 1000];
        var yArray = [-20, 0, 30, -50, 100];
        $("#wijlinechart").wijlinechart({
            axis: {
                y: {
                    origin: 0
                }
            },
            showChartLabels: false,
            header: {
                text: "My Stocks"
            },
            hint: {
                content: function () {
                    return this.data.lineSeries.label + '\n' +
                        this.x + '\n' + this.y + '';
                },
                contentStyle: {"font-size": 10},
                offsetY: -10
            },
            legend: {visible: false},
            seriesList: [
                {
                    label: "My Stocks",
                    legendEntry: true,
                    data: {
                        x: xArray,
                        y: yArray
                    },
                    markers: {
                        visible: true,
                        type: "circle"
                    }
                }
            ]
        });
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。LineChart にマウスポインタを合わせると、ヒントが表示されます。

関連トピック

参照