我开始为我正在研究的项目使用amchart4库,但遇到了问题,没有找到任何好的教程或互联网帮助。 Amchart 4能够通过json加载图形配置,并通过远程json加载数据,但是我无法找到从远程json加载图形数据和部分配置的方法。我有一个图,根据选择,它必须在x轴上显示不同的标签,因为信息的粒度不同。 我的代码在控制台中没有给出任何错误,但是图形只是空白,只有滚动条位于白色区域。 跟随我的json和我的js。
JavaScript代码:
if ($('#myGraph').length) {
myGraphChart = am4core.create("myGraph", am4charts.XYChart);
myGraphChart.scrollbarX = new am4core.Scrollbar();
myGraphChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
myGraphChart.dataSource.url = "./json/json_data.json";
myGraphChart.dataSource.parser.options.emptyAs = 0;
myGraphChart.dataSource.events.on("error", function(ev) {
console.log("Oopsy! Something went wrong");
});
myGraphChart.dataSource.events.on("done", function(ev) {
ev.target.component.config = {
hands: ev.data
}
});
}
JSON文件:
{
"data": [
{
"xvalue": "aaaaaa",
"error": 500,
"warnig": 50,
"right": 5000
},
{
"xvalue": "bbbb",
"error": 500,
"warnig": 50,
"right": 5000
},
{
"xvalue": "ccc",
"error": 500,
"warnig": 50,
"right": 5000
}
],
"hiddenState": {
"properties": {
"opacity": 0
}
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "xvalue"
}
}
],
"yAxes": [
{
"type": "ValueAxis",
"min": 0,
"renderer": {
"baseGrid": {
"disabled": true
},
"grid": {
"strokeOpacity": 0.07
}
}
}
],
"series": [
{
"type": "ColumnSeries",
"dataFields": {
"valueY": "error",
"categoryX": "xvalue"
}
}
]
}