Amcharts 4从远程加载数据和部分配置

时间:2019-01-05 19:52:07

标签: javascript json amcharts

我开始为我正在研究的项目使用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"
            }
        }
    ]
}

0 个答案:

没有答案