外観の変更

クイックスタートの例を基に、axis、seriesList、および seriesStyles オプションを使用して、マーカー、マーカーの色とグラデーション、およびラベルテキストの回転を変更できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、軸ラベルの回転およびマーカータイプを変更し、seriesStyles オプションを使用してマーカーの色と線の幅を変更します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ 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>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            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 ファイルを保存し、それをブラウザで開きます。軸ラベルが回転して表示され、マーカーは円になり、線がカスタムスタイル設定されます。

関連トピック

参照