使用来自AJAX / JSON的数据填充Highcharts系列

时间:2014-01-29 03:22:19

标签: javascript jquery ajax json highcharts

我有一个容器<div class="statsrep"></div>,我想在其中显示我的图表/图表。我想用我的AJAX / JSON中的数据填充图表的数据,但它似乎无法正常工作。图表给了我这个(仔细查看类别/日期):

enter image description here

这可能是什么原因?

AJAX / JSON响应是:

{
  "dates": "'2014-01-06','2014-01-07','2014-01-08','2014-01-09','2014-01-12','2014-01-13','2014-01-14','2014-01-15','2014-01-16','2014-01-19','2014-01-20','2014-01-21','2014-01-22','2014-01-23','2014-01-26'",
  "leadsTotal": "260,474,689,851,1104,1268,1439,1588,1726,2021,2216,2395,2587,2756,3002",
  "leadQuote": "11,12,12,14,14,15,15,15,16,14,15,16,15,15,15",
  "salesConv": "3,4,5,6,6,6,6,6,6,5,6,6,5,5,5",
  "totalIMU": "15418.95,21875.09,32555.79,41962.11,53790.88,59817.54,64005.61,72176.84,74874.39,83949.47,98021.05,106736.84,109518.60,117886.32,124241.40",
  "vpl": "59.30,46.15,47.25,49.31,48.72,47.17,44.48,45.45,43.38,41.54,44.23,44.57,42.33,42.77,41.39"
}

这是我的AJAX请求:

var date = $('#frankdate').val();
var aff = $('#affID').val();

$.ajax({
    type: 'post',
    url: 'graphMerchantTotal.php',
    dataType: "json",
    data: {
        merchant:"frank",
        date: date,
        aff: aff
    },
    success:function(json){
        $('#statsrep').highcharts({
            title: {
                text: 'Frank Daily Stats',
                x: -20 //center
            },
            subtitle: {
                text: 'Overall Total',
                x: -20
            },
            xAxis: {
                categories: json.dates
            },
            yAxis: {
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {

            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 0
            },
            series: [{
                name: 'Leads',
                data: json.leadsTotal
            }, {
                name: 'Lead to Quote (%)',
                data: json.leadQuote
            }, {
                name: 'Sale Conversion (%)',
                data: json.salesConv
            }, {
                name: 'Total After IMU',
                data: json.totalIMU
            }, {
                name: 'VPL',
                data: json.vpl
            }]
        });
    }
});

1 个答案:

答案 0 :(得分:0)

您需要在系列中使用数组,但在您的情况下,您只有带点的字符串,以逗号分隔。你需要使用split()函数并推入新数组,然后在highcharts中使用。