面グラフおよびスプライングラフの作成

全て展開

すべて折りたたむ

面グラフ

クイックスタートの例を基に、type オプションを使用して、wijlinechart を面グラフに変更できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、type オプションを "area" に設定します。

ドロップダウンからコードを貼り付けます

ViewModel スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ type: "area", showChartLabels: false, hint: { content: function () { return this.y; } }, header: { text: "World of Warcraft Players by Region" }, axis: { y: {labels: {style: {rotation: -45}}}, x: {labels: {style: {rotation: -45}}} }, seriesList: [ { label: "North America", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000] }, markers: {visible: true, type: "circle"} }, { label: "Europe", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000] }, markers: {visible: true, type: "circle"} }, { label: "Asia", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000] }, markers: {visible: true, type: "circle"} } ], seriesStyles: [ {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1} ], }); var resizeTimer = null; $(window).resize(function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { var jqLine = $("#wijlinechart"), width = jqLine.width(), height = jqLine.height(); if (!width \|\| !height) { window.clearTimeout(resizeTimer); return; } jqLine.wijlinechart("redraw", width, height); }, 250); }); }) </script>

ViewModel スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            type: "area",
            showChartLabels: false,
            hint: {
                content: function () {
                    return this.y;
                }
            },
            header: {
                text: "World of Warcraft Players by Region"
            },
            axis: {
                y: {labels: {style: {rotation: -45}}},
                x: {labels: {style: {rotation: -45}}}
            },               
            seriesList: [
                {
                    label: "North America",
                    legendEntry: true,
                    data: {
                        x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                            new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), 
                            new Date("1/1/2008")],
                        y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                    },
                    markers: {visible: true, type: "circle"}
                },
                {
                     label: "Europe",
                     legendEntry: true,
                     data: {
                         x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                             new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), 
                             new Date("12/1/2006"), new Date("1/1/2008")],
                         y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                     },
                     markers: {visible: true, type: "circle"}
                },
                {
                      label: "Asia",
                      legendEntry: true,
                      data: {
                          x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                              new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), 
                              new Date("1/1/2008")],
                          y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                      },
                      markers: {visible: true, type: "circle"}
                }
            ],
            seriesStyles: [
                {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1}
            ],
        });

        var resizeTimer = null;
        $(window).resize(function () {
            window.clearTimeout(resizeTimer);
            resizeTimer = window.setTimeout(function () {
                var jqLine = $("#wijlinechart"),
                width = jqLine.width(),
                height = jqLine.height();
                if (!width || !height) {
                    window.clearTimeout(resizeTimer);
                    return;
                }
                jqLine.wijlinechart("redraw", width, height);
            }, 
            250);
        });
    })
 </script>

HTML ファイルの <body> セクションを変更する必要はありません。このグラフを作成するには、基本的な <div> タグで十分です。
HTML ファイルを保存し、それをブラウザで開きます。このグラフは、実際のウィジェットで次のように表示されます。

スプライン面グラフ

seriesList オプションの fitType プロパティを使用して、線の角度を滑らかにしたスプライン面グラフを作成することもできます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、seriesList の各系列の fitType オプションを "spline" に変更します。

ドロップダウンからコードを貼り付けます

ViewModel スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ type: "area", showChartLabels: false, hint: { content: function () { return this.y; } }, header: { text: "World of Warcraft Players by Region" }, axis: { y: {labels: {style: {rotation: -45}}}, x: {labels: {style: {rotation: -45}}} }, seriesList: [ { label: "North America", fitType: "spline", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000] }, markers: {visible: true, type: "cross"} }, { label: "Europe", fitType: "spline", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000] }, markers: {visible: true, type: "box"} }, { label: "Asia", fitType: "spline", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000] }, markers: {visible: true, type: "diamond"} } ], seriesStyles: [ {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1} ] }); var resizeTimer = null; $(window).resize(function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { var jqLine = $("#wijlinechart"), width = jqLine.width(), height = jqLine.height(); if (!width \|\| !height) { window.clearTimeout(resizeTimer); return; } jqLine.wijlinechart("redraw", width, height); }, 250); }); }) </script>

ViewModel スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            type: "area",
            showChartLabels: false,
            hint: {
                content: function () {
                    return this.y;
                }
            },
            header: {
                text: "World of Warcraft Players by Region"
            },
            axis: {
                y: {labels: {style: {rotation: -45}}},
                x: {labels: {style: {rotation: -45}}}
            },               
            seriesList: [
                {
                    label: "North America",
                    fitType: "spline",
                    legendEntry: true,
                    data: {
                        x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                            new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), 
                            new Date("1/1/2008")],
                        y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                    },
                    markers: {visible: true, type: "cross"}
                },
                {
                     label: "Europe",
                     fitType: "spline",
                     legendEntry: true,
                     data: {
                         x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                             new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), 
                             new Date("12/1/2006"), new Date("1/1/2008")],
                         y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                     },
                     markers: {visible: true, type: "box"}
                },
                {
                      label: "Asia",
                      fitType: "spline",
                      legendEntry: true,
                      data: {
                          x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), 
                              new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), 
                              new Date("1/1/2008")],
                          y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                      },
                      markers: {visible: true, type: "diamond"}
                }
            ],
            seriesStyles: [
                {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1}
            ]
        });

        var resizeTimer = null;
        $(window).resize(function () {
            window.clearTimeout(resizeTimer);
            resizeTimer = window.setTimeout(function () {
                var jqLine = $("#wijlinechart"),
                width = jqLine.width(),
                height = jqLine.height();
                if (!width || !height) {
                    window.clearTimeout(resizeTimer);
                    return;
                }
                jqLine.wijlinechart("redraw", width, height);
            }, 
            250);
        });
    })
 </script>

HTML ファイルの <body> セクションを変更する必要はありません。このグラフを作成するには、基本的な <div> タグで十分です。
HTML ファイルを保存し、それをブラウザで開きます。このグラフは、実際のウィジェットで次のように表示されます。

面グラフ

スプライン面グラフ

関連トピック