我正在使用amcharts作为个人用途的小应用程序。我得到了一个静态的本地副本按照我想要的方式工作,但是当我做了一些改动以使它变得动态我没有得到
SCRIPT5007: Unable to get property 'time' of undefined or null reference
在serial.js第46行,第364位。
代码:
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.balloon.bulletSize = 5;
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
categoryAxis.twoLineMode = true;
categoryAxis.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// first value axis (on the left)
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisColor = "#FF6600";
valueAxis.axisThickness = 2;
chart.addValueAxis(valueAxis);
// GRAPHS (one per line you want to make which for us is one line per user
var users = listUsers();
var bulletList=["round", "square", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "bubble", "diamond"];
var colorList=["#00FF00", "#FF0000", "#0000FF", "#FF00FF", "#FFFF00", "#00FFFF", "#000000"];
var bulletIndex = 0;
var colorIndex = 0;
for(var user in users) {
var graph = new AmCharts.AmGraph();
graph.valueAxis = valueAxis; // we have to indicate which value axis should be used
graph.title = users[user];
graph.valueField = users[user];
graph.bullet = bulletList[bulletIndex++];
graph.hideBulletsCount = 30;
graph.bulletBorderThickness = 1;
graph.lineColor = colorList[colorIndex++];
chart.addGraph(graph);
if(bulletIndex >= bulletList.length) {
bulletIndex = 0;
}
if(colorIndex >= colorList.length) {
colorIndex = 0;
}
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0.1;
chartCursor.fullWidth = true;
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
样本数据:
var allData = {
"series1" : [ {
"date" : new Date("01/05/2017"),
"Brian" : 290,
"Lisa" : 188
}, {
"date" : new Date("01/06/2017"),
"Brian" : 289,
"Lisa" : 188
}, {
"date" : new Date("01/07/2017"),
"Brian" : 288,
"Lisa" : 187
} ],
"series2" : [ {
"date" : new Date("01/05/2017"),
"Brian" : 28.9,
"Lisa" : 18.8
}, {
"date" : new Date("01/06/2017"),
"Brian" : 28.9,
"Lisa" : 18.8
}, {
"date" : new Date("01/07/2017"),
"Brian" : 28.8,
"Lisa" : 18.7
} ]
}
答案 0 :(得分:0)
查看您的数据格式,它不是dataProvider
的预期格式。 dataProvider
是一个对象数组,您可以从the demos on AmCharts' site看到。你有一个对象包含在series1和series2中的两个对象数组,这些对象将无法工作。这就是数据的外观:
[{
"date": <your string date, millisecond timestamp, or date object>,
"Brian": <value>,
"Lisa": <value>
},
// ... etc
]
如果要在同一个图表中比较多个系列,那么您应该查看how to create a stock chart,这似乎更符合您的尝试。 “series1”和“series2”数组可以表示为DataSet
个对象。
这是一个quick and dirty fiddle,可以将您的数据实施到股票图表中,利用您的大部分代码来帮助您入门。