用json文件加載高圖表

我想在ajax調用之後在我的document.ready函數內加載圖表。用json文件加載高圖表

的JSON經由PHP產生，其結果是這樣的：

[{ 「名稱」：「Precios」，「數據」：[[ 「5.50」，「2013-07-01十三點50： 00 「]，[」 6.50" ，「2013年7月5日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);

關於我在做什麼錯的任何指針或爲什麼圖不顯示將不勝感激。

來源

2013-07-17 user2429151

日期應該是時間戳（以毫秒爲單位），值必須是數字，而不是字符串。

來源

2013-07-18 09:25:38

解決

我能得到它的工作，我不得不改變做法。

我修改了JSON得到這個：

[{ 「行」：[{ 「PRECIO」：「5.50」，「出生日期」：「2013-07-01」}，{ 「PRECIO」：「6.50」，「出生日期」：「2013年7月5日」}]，「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

來源

2013-07-18 17:14:06 user2429151

用json文件加載高圖表

回答

相關問題