我正在尝试使用Data Loader显示amCharts Stock Chart.一切都运作良好.现在我想使用
AJAX显示股票事件,但无法找到如何做的线索.绘制图表的
JavaScript代码:
<script>
var chartData = [];
generateChartData();
function generateChartData() {
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
var b = Math.round(Math.random() * 100000000);
chartData.push({
date: newDate,
value: a,
volume: b
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download as image",
"menu": [ "PNG", "JPG", "SVG" ]
}, {
"label": "Download data",
"menu": [ "CSV", "XLSX" ]
}, {
"format": "PRINT",
"label": "Print Chart"
} ]
} ]
},
"theme": "light",
"fontFamily": 'Open Sans',
"color": '#888',
dataSets: [
{
title: "MSFT",
color: "#b0de09",
fieldMappings: [{
fromField: 'value',
toField: 'value'
}],
dataLoader: {
"url": "data.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
compared : true,
categoryField: 'date'
},
],
panels: [{
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
graphBulletSize: 1,
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
periodSelector: {
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
mouseWheelZoomEnabled:true,
usePrefixes: true
}
});
</script>
json的结果如下
[{"date":"2013-08-24","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"flag","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"text","graph":"g1","backgroundColor":"#FFFFFF","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]
Am getting following result like below image
But I want result like below second image
最佳答案 您可以在数据集定义中使用
eventDataLoader
块,其方式与使用dataLoader加载图表数据的方式完全相同.
即:
dataSets: [ {
title: "MSFT",
color: "#b0de09",
fieldMappings: [{
fromField: 'value',
toField: 'value'
}],
dataLoader: {
"url": "data.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true
},
eventDataLoader: {
"url": "events.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true
},
compared : true,
categoryField: 'date'
} ]
请注意,我删除了reverse,delimiter和useColumnNames参数,因为它们与JSON格式无关.