Question

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

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

[{“name”：“Precios”，“data”：[[“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);

关于我做错了什么或为什么图表没有显示的任何指示都会受到赞赏。

Answer 1

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

Answer 2

<强>解决

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

我修改了JSON来获得这个：

[{ “行”：[{ “PRECIO”： “5.50”， “出生日期”： “2013-07-01”}，{ “PRECIO”： “6.50”， “出生日期”：“2013-07- 05 “}]，” fechas “：[{” 出生日期 “：” 2013-07-01 “}，{” 出生日期 “：” 2013年7月5日 “}]，” 名称 “：” 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

使用json文件加载highcharts图

2 个答案: