Highcharts数据不会显示在图表上

时间:2014-04-21 02:00:55

标签: javascript jquery ajax highcharts

我正在从ajax响应中创建一个highcharts表,但我的数据没有显示。我只需要一双新鲜的眼睛,因为它让我发疯了......

修改 挖了一下之后。 typeof data会返回object。我不知道这是否是一个问题,因为我尝试手动插入数据,但图表仍未返回任何数据。对此的任何想法将不胜感激。

编辑#2 显然,经过更多挖掘后,它最终成为一个可见性问题,现在可以扩展到我的datepicker。当我导出图表时,所有数据点都存在....

我的ajax调用和highcharts代码

$.ajax({
        url: 'getTransactions.php',
        dataType: 'json',
        data: formData,
        error: function (error) {
            console.log(JSON.stringify(error));
        }
    }).done(function(data) {
            alert = function(){}; //handle phantom alert window after the data stop downloading
            var response = data.transactionList;
            var amount = '';
            var data = []; // Array to push the amount data
            var dates = []; // Array to push the dates

            var currentKeyDate = ''; // var to handle the date[key]

            //create current date and lastMonthDate (current month -1)
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1;
            var lm = mm -1; //Get last month
            var yyyy = today.getFullYear();

            if(dd<10) {
                dd='0'+dd
            }
            if(mm<10) {
                mm='0'+mm
            }

            if(lm<10) {
                lm='0'+lm
            }


            var lastMonthDate = yyyy + '-' + lm + '-' + dd;
            var currentDate = yyyy + '-' + mm + '-' + dd;

            for (var key = 0; key < response.length; ++key) {
                currentKeyDate = response[key].created;
                amount = response[key].amount /100; //current amount is in pennies. Convert to dollars

                //convert the amounts to reflect expense vs deposit. we want expenses to be positive and deposits to be negative
                amount = amount * -1;

                //we only get data within a months range
                if(currentKeyDate >= lastMonthDate && currentKeyDate <= currentDate){
                       data.push(amount);
                       dates.push(currentKeyDate);
                }
            }
            console.log(data);
            console.log(dates);

            $('#container').highcharts({
                title: {
                    text: 'Transaction Report',
                    x: -20 //center
                },
                xAxis: {
                    categories: dates
                },
                yAxis: {
                    title: {
                        text: 'Transactions'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valuePrefix: '$'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Transactions',
                    data: data
                }]

            });

        });

这是我的数据和日期数组,因为它们来到控制台。 两者的长度相同。
请注意,日期显示在x轴上,但数据量未显示在图表中

Data
[1234, 9, 1234, 12345, 12345, 1234, 12345, 12345, 99, 123344, 1234, 1234, 1234, 1234, 1234, 89.3, 3.2, 0.78, 0, 1.2, 1.2, 1.2, 4.45, 6.66, 2.22, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 12.34, 0.12, 0.12, 1.23, 1.23, 100, 100, 100, 10, 850, 850, 5.16, 8.94, 8.94, -1587.92, 5.68, 0, 0.15, 3442.35, 0, 77.78, 7896.18, 7896.18, 0, 7.58, 32, 1.65, 1.27, 10, 1234, 1234, 1234, 34.34, 44444, 44444, 0.45, -1234, 222, 222, 444, 4444, 4444, -4444.5, -44.4, -44.4, 44.4, 500, 500, 500, -500, -500, -500, -500, -500, -500, -500, -500, -500, -500, -500, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 123, 4321, 0.23, 0.07, 0.02, 999.99, 123.45, 1234.56, 999.99, 1234.56, 5, 1600, 1.23, 10, 0, 1, 0, 1, 100, -12.34, 0, -1231.23, 432112.34, 6.66, 999.99, -1231.23, 1, 10.03, 0.23, 0, 1234, 0, 76, 1.23, 12.34, 7.68, 5.55, 7.77, 55.44, 123, 999, 0.07, 0.12, 4898.23]

Dates
["2014-04-20", "2014-04-20", "2014-04-20", "2014-04-20", "2014-04-20", "2014-04-20", "2014-04-20", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-19", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-18", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-17", "2014-04-16", "2014-04-16", "2014-04-16", "2014-04-16", "2014-04-16", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-15", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-14", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-12", "2014-04-09", "2014-04-09", "2014-04-09", "2014-04-08", "2014-04-08", "2014-04-08", "2014-04-08", "2014-04-08", "2014-04-08", "2014-04-07", "2014-04-07", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-06", "2014-04-04", "2014-04-01", "2014-04-01", "2014-04-01", "2014-03-31", "2014-03-31", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-28", "2014-03-20", "2014-03-20"]

0 个答案:

没有答案