動的折れ線グラフの作成

全て展開

すべて折りたたむ

クイックスタートの例を基に、ユーザーがデータポイントを追加できる動的なグラフに wijlinechart を変更できます。

メモ：これまでにこの機能を使用したことがある場合は、data("wijlinechart") が機能しなくなったことに注意してください。
代わりに、data("wijmoWijlinechart") を使用する必要があります。

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

データ配列を設定します。
このデータ配列を使用するグラフを seriesList で設定します。
ユーザーが新しいデータポイントを作成できるようにし、クリックのたびにグラフを再描画するクリック関数を作成します。

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

ViewModel スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { var xArray = [100, 200, 400, 800, 1000]; var yArray = [-20, 0, 30, -50, 100]; $("#wijlinechartDefault").wijlinechart({ axis: { y: { origin: 0 } }, showChartLabels: false, 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"} } ] }); $("#wijlinechartDefault").click(function (e) { var offset = $(this).offset(), left = e.pageX - offset.left, top = e.pageY - offset.top, lineChart = $(this).data("wijmo-wijlinechart"), bounds = lineChart.canvasBounds, xMin = lineChart.axisInfo.x.min, xMax = lineChart.axisInfo.x.max, yMin = lineChart.axisInfo.y[0].min, yMax = lineChart.axisInfo.y[0].max, xVal, yVal; if (left <= bounds.startX \|\| left >= bounds.endX \|\| top <= bounds.startY \|\| top >= bounds.endY) { return; } xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX) * (xMax - xMin); yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY) * (yMax - yMin); alert("The New Data Point is " + "x:" + Math.round(xVal, 10) + ", y:" + Math.round(yVal, 10)); xArray.push(Math.round(xVal, 10)); yArray.push(Math.round(yVal, 10)); $("#wijlinechartDefault").wijlinechart({ seriesList: [ { label: "My Stocks", legendEntry: true, data: {x: xArray, y: yArray}, markers: {visible: true, type: "circle"} }] }); $("#wijlinechartDefault").wijlinechart("redraw", "true"); }); }); </script>

ViewModel スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
         $(document).ready(function () {
             var xArray = [100, 200, 400, 800, 1000];
             var yArray = [-20, 0, 30, -50, 100];
             $("#wijlinechartDefault").wijlinechart({
                 axis: {
                     y: {
                         origin: 0
                     }
                 },
                 showChartLabels: false,
                 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"}
                    }
                ]
             });
            $("#wijlinechartDefault").click(function (e) {
                var offset = $(this).offset(),
                    left = e.pageX - offset.left,
                    top = e.pageY - offset.top,
                    lineChart = $(this).data("wijmo-wijlinechart"),
                    bounds = lineChart.canvasBounds,
                    xMin = lineChart.axisInfo.x.min,
                    xMax = lineChart.axisInfo.x.max,
                    yMin = lineChart.axisInfo.y[0].min,
                    yMax = lineChart.axisInfo.y[0].max,
                    xVal, yVal;
 
                if (left <= bounds.startX || left >= bounds.endX
                        || top <= bounds.startY || top >= bounds.endY) {
                    return;
                }
                xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX)
                    * (xMax - xMin);
                yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY)
                    * (yMax - yMin);
                alert("The New Data Point is " + "x:" + Math.round(xVal, 10) + ", y:" + Math.round(yVal, 10));
 
                xArray.push(Math.round(xVal, 10));
                yArray.push(Math.round(yVal, 10));
 
                $("#wijlinechartDefault").wijlinechart({
                    seriesList: [
                    {
                        label: "My Stocks",
                        legendEntry: true,
                        data: {x: xArray, y: yArray},
                        markers: {visible: true, type: "circle"}
                    }]
                });
 
                $("#wijlinechartDefault").wijlinechart("redraw", "true");
            });
        });
 </script>

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

関連トピック

参照