Невозможно назначить данные json в событиях amcharts
Я пытаюсь отобразить биржевую диаграмму amCharts с помощью Data Loader. Все работает хорошо. Теперь я хочу отобразить фондовые события, используя 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"}]
Получаю следующий результат, как на картинке ниже
Но я хочу, чтобы результат, как показано ниже второго изображения
2 ответа
Ты можешь использовать 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'
} ]
Обратите внимание, что я удалил reversed, delimiter, а также useColumnNames параметры, так как они не имеют отношения к формату JSON.
@martynasma прав, но вы можете использовать postProcess для дальнейшей обработки полученных данных события.
Вот пример, который я получил от одного из их примеров на github:
"eventDataLoader": {
"url": "data/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function ( data ) {
for ( var x in data ) {
switch( data[x].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
data[x] = {
type: "pin",
graph: "g1",
backgroundColor: color,
date: data[x].Date,
text: data[x].Type,
description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
};
}
return data;
}
}