Question

我正在尝试创建一个图表，显示来自不同商店的产品价格。问题是它只显示每个商店的第一个值而不是所有值（每个商店的cca 10）。

数据使用JSON传递。由于它必须是多线图，我使用StockChart。

你知道问题在哪里吗？

<script>
    var lines = [];
    var dataSets = [];

    generateChartData();

    function generateChartData() {
        var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
        var loopcounter = -1;
        $.each(google_chart_json, function (key, val) {
            var line = [];
            loopcounter = loopcounter + 1;

            $.each(val, function (_, scan) {
                var year = scan[0][0];
                var month = scan[0][1];
                var day = scan[0][2];
                var hour = scan[0][3];
                var minute = scan[0][4];
                var price = scan[1];

                var data = {
                    'date': new Date(year, month - 1, day, hour, minute),
                    'value': price
                };
                line.push(data);
            });

            lines.push([key, line]);
        });
        console.log('LINES');
        console.log(lines);


        $.each(lines, function (_, name_line) {
            var dict = {
                'title': name_line[0],
                "fieldMappings": [{
                    "fromField": "value",
                    "toField": "value"
                }],
                "dataProvider": name_line[1],
                "categoryField": "date"
            };
            dataSets.push(dict);
        });
    }

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "stock",
        "theme": "light",
        "dataSets": dataSets,

        "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,

            "stockGraphs": [{
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:<b>[[value]]</b>",
                "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
            }],
            "stockLegend": {
                "periodValueTextComparing": "[[percents.value.close]]%",
                "periodValueTextRegular": "[[value.close]]"
            }
        }],

        "chartScrollbarSettings": {
            "graph": "g1"
        },

        "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
        },

        "periodSelector": {
            "position": "left",
            "periods": [{
                "period": "MM",
                "selected": true,
                "count": 1,
                "label": "1 month"
            }, {
                "period": "YYYY",
                "count": 1,
                "label": "1 year"
            }, {
                "period": "YTD",
                "label": "YTD"
            }, {
                "period": "MAX",
                "label": "MAX"
            }]
        },

        "dataSetSelector": {
            "position": "left"
        },

        "export": {
            "enabled": true
        }
    });
    chart.panelsSettings.recalculateToPercents = "never";
</script>

Answer 1

AmCharts仅支持按日期升序排列的数据，因此您必须相应地对数据进行排序。我在加载行数据后添加了这个，但在将它添加到行数组之前：

          line.sort(function(lhs, rhs) {
            return lhs.date.getTime() - rhs.date.getTime();
          });

演示如下：

var lines = [];
    var dataSets = [];

    generateChartData();

    function generateChartData() {
        var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
        var loopcounter = -1;
        $.each(google_chart_json, function (key, val) {
            var line = [];
            loopcounter = loopcounter + 1;

            $.each(val, function (_, scan) {
                var year = scan[0][0];
                var month = scan[0][1];
                var day = scan[0][2];
                var hour = scan[0][3];
                var minute = scan[0][4];
                var price = scan[1];

                var data = {
                    'date': new Date(year, month - 1, day, hour, minute),
                    'value': price
                };
                line.push(data);
            });
          line.sort(function(lhs, rhs) {
            return lhs.date.getTime() - rhs.date.getTime();
          });

            lines.push([key, line]);
        });
        console.log('LINES');
        console.log(lines);


        $.each(lines, function (_, name_line) {
            var dict = {
                'title': name_line[0],
                "fieldMappings": [{
                    "fromField": "value",
                    "toField": "value"
                }],
                "dataProvider": name_line[1],
                "categoryField": "date"
            };
            dataSets.push(dict);
        });
    }

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "stock",
        "theme": "light",
        "dataSets": dataSets,
        "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,

            "stockGraphs": [{
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:<b>[[value]]</b>",
                "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
            }],
            "stockLegend": {
                "periodValueTextComparing": "[[percents.value.close]]%",
                "periodValueTextRegular": "[[value.close]]"
            }
        }],

        "chartScrollbarSettings": {
            "graph": "g1"
        },

        "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
        },

        "periodSelector": {
            "position": "left",
            "periods": [{
                "period": "MM",
                "selected": true,
                "count": 1,
                "label": "1 month"
            }, {
                "period": "YYYY",
                "count": 1,
                "label": "1 year"
            }, {
                "period": "YTD",
                "label": "YTD"
            }, {
                "period": "MAX",
                "label": "MAX"
            }]
        },

        "dataSetSelector": {
            "position": "left"
        },

        "export": {
            "enabled": true
        }
    });
    chart.panelsSettings.recalculateToPercents = "never";

#chartdiv {
  width: 100%;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

Amcharts.js无法正确绘制图表

1 个答案: