0
我想使用AmChart並通過JSON從MySQL獲取圖表的數據。amchart JSON的多個數據
這是我的js來源:
AmCharts.ready(function() {
//generateChartData();
createStockChart();
});
function createStockChart() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "../amcharts/images/";
// DATASETS //////////////////////////////////////////
$.getJSON("jsonlistdisp.php", function (locdata) {
$.each(locdata, function (i, item) {
$.getJSON("jsonvaluedisp.php?id_disp="+locdata[i].id, function (data) {
var newDate = new Date(data.date);
newDate.setHours(data.hour);
var dataSet = new AmCharts.DataSet();
dataSet.title = locdata[i].name;
dataSet.fieldMappings = [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}];
dataSet.dataProvider = data;
dataSet.categoryField = newDate;
// set data sets to the chart
chart.dataSets.push(dataSet);
});
});
});
// PANELS ///////////////////////////////////////////
// first stock panel
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = false;
stockPanel1.title = "Valor";
stockPanel1.percentHeight = 70;
// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
graph1.comparable = true;
graph1.compareField = "value";
graph1.compareGraphBalloonText="[[value]] kwh"; //mostrar las unidades de medida en el balloon de las comparaciones
graph1.balloonText= "[[value]] kwh"; //mostrar las unidades de medida en el balloon
stockPanel1.addStockGraph(graph1);
// create stock legend
stockPanel1.stockLegend = new AmCharts.StockLegend();
stockPanel1.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend
// second stock panel
var stockPanel2 = new AmCharts.StockPanel();
stockPanel2.title = "Volumen";
stockPanel2.percentHeight = 30;
var graph2 = new AmCharts.StockGraph();
graph2.valueField = "volume";
graph2.type = "column";
graph2.showBalloon = false;
graph2.fillAlphas = 1;
stockPanel2.addStockGraph(graph2);
stockPanel2.stockLegend = new AmCharts.StockLegend();
stockPanel2.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend
// set panels to the chart
chart.panels = [stockPanel1, stockPanel2];
// OTHER SETTINGS ////////////////////////////////////
var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
scrollbarSettings.graph = graph1;
scrollbarSettings.updateOnReleaseOnly = true;
scrollbarSettings.usePeriod = "10mm";
chart.chartScrollbarSettings = scrollbarSettings;
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = cursorSettings;
// PERIOD SELECTOR ///////////////////////////////////
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [{
period: "hh",
count: 24,
label: "ddd"
}, {
period: "hh",
count: 48,
label: "dd"
}, {
period: "hh",
count: 120,
label: "ddd"
}, {
period: "hh",
count: 240,
label: "dia"
}, {
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.usePrefixes = true;
chart.panelsSettings = panelsSettings;
// DATA SET SELECTOR
var dataSetSelector = new AmCharts.DataSetSelector();
dataSetSelector.position = "left";
chart.dataSetSelector = dataSetSelector;
chart.write('chartdiv');
}
}
JSON文件 「jsonlistdisp.php」 的結果:
[
{
"id": "1",
"name": "dispositivo 1",
"desc": "dispositivo"
},
{
"id": "2",
"name": "dispositivo 2",
"desc": "dispositivo"
}
]
和JSON文件 「jsonvaluedisp.php」 的結果:
[
{
"date": "2013,08,19",
"hour": "15,17,51,0",
"value": "0.393000",
"volume": "0.393000"
},
{
"date": "2013,08,19",
"hour": "15,30,01,0",
"value": "0.393000",
"volume": "0.393000"
}
]
我不知道問題是日期格式還是什麼問題,當我測試這段代碼時,我沒有看到任何東西。
有人知道問題如何? 由於
感謝您的快速回答。我嘗試了這個,問題沒有解決。我包括在帖子中構建圖表的來源。謝謝 – xandra
我想你的數據是在圖表初始化後加載的。嘗試添加chart.validateNow();在$ .getJSON方法的結尾。 – zeroin