0

我试图在 ajax 调用后在我的 document.ready 函数中加载一个图表。

JSON 是通过 php 生成的，结果如下：

[{"名称":"Precios","数据":[["5.50","2013-07-01 13:50:00"],["6.50","2013-07-05 11:04:00 "]]}]

我正在尝试使用以下代码绘制 json 的数据部分：

var options = {
chart: {
        renderTo: 'graphContainer',
    defaultSeriesType: 'line',
    marginRight: 130,
    marginBottom: 25
},

title: {
    text: 'Registro de Precios',
    x: -20 //center
},
    subtitle: {
    text: 'Producto: '+nombreProducto,
    x: -20 //center
},

xAxis: {
    labels: {
        enabled: false
    },
    title: {
    text: 'Fecha'
    }
},

yAxis: [
    {
    min: 0,
    title: {
        text: 'Precio'
    }
    },
    {
    linkedTo: 0,
        opposite: true
    }
],

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
    borderWidth: 0
},

series: []
};  
$jDatepicker.getJSON('graficasDatos.php?idTienda='+idTienda+'&idProducto='+idProducto, function(data) {          

    $jDatepicker.each(data, function(key, value) {
var series = {};
$jDatepicker.each(value, function(key,val) {
    if(key == 'name')
    {
    series.name = val;
    }
    else{
    var datos;
    $jDatepicker.each(val, function(key,val) {
        datos = val;
        var x = datos[1];
        var y = datos[0];
        series.data = [x,y];
        options.series.push(series); 
    });
    }
});
});
var chart = new Highcharts.Chart(options);

任何关于我做错了什么或为什么图表没有显示的指针都将不胜感激。

4

2 回答 2

0

日期应该是时间戳（以毫秒为单位的时间），值必须是数字，而不是字符串。

于 2013-07-18T09:25:38.193 回答
0

解决了

我能够让它工作，我只需要改变方法。

我修改了 JSON 来得到这个：

[{"rows":[{"precio":"5.50","fecha":"2013-07-01"},{"precio":"6.50","fecha":"2013-07-05"} ],"fechas":[{"fecha":"2013-07-01"},{"fecha":"2013-07-05"}],"name":"Precio"}]

这是更新的代码：

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'graphContainer',
    showAxes: true,
    borderWidth: 1
},
title: {                    
        text: 'Precios registrados del producto'
},
credits: {
    text: 'GTSF'
},
xAxis: {
    type: 'datetime',
    title: {
    text: 'Fecha',
    align: 'high'
    },
    labels: {
    rotation: -45,
    align : 'center',
    y: 40,
    x: -20
    },
    categories: []
},
yAxis: {
    title: {
    text: 'Precio ($)'
    }
},
plotOptions: {
    line: {
    allowPointSelect: true
    }
}
});

// Kick off the loading screen
chart.showLoading("Obteniendo precios de producto "+ nombreProducto +" ....");

$jDatepicker.getJSON('graficasDatos.php?idTienda='+idTienda+'&idProducto='+idProducto, function(stockData) {          

    // Construct series data and add the series
var seriesData = [];
var categoriesArray = [];

    $jDatepicker.each(stockData[0].rows, function(idx, data) {
    precio = parseFloat(data.precio);
    seriesData.push([ data.fecha, precio ]);
});

$jDatepicker.each(stockData[0].fechas, function(idx, data) {
    categoriesArray.push( data.fecha );
});

var seriesOpts = {
    name: stockData[0].name,
    data: seriesData,
    // This is to stop Highcharts rotating the color
    // for the series
    color: chart.options.colors[0],
    marker: {
        symbol: chart.options.symbols[0]
    }
}

chart.options.xAxis.categories = categoriesArray;

chart.hideLoading();
chart.addSeries(seriesOpts, false);
//chart.addAxis(axisOpts, true);
chart.redraw();
});

我希望这可以帮助某人：D

于 2013-07-18T17:14:06.813 回答