0

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);

私が間違っていること、またはグラフが表示されない理由についてのポインタをいただければ幸いです。

4

2 に答える 2

0

解決した

私はそれを機能させることができましたが、アプローチを変更する必要がありました。

これを取得するために JSON を変更しました。

[{"rows":[{"precio":"5.50","fecha":"2013-07-01"},{"precio":"6.50","fecha":"2013-07-05"} ],"フェチャ":[{"フェチャ":"2013-07-01"},{"フェチャ":"2013-07-05"}],"名前":"プレシオ"}]

そして、これは更新されたコードです：

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 に答える