Amcharts 4 загрузки данных и частичной конфигурации с удаленного - PullRequest
Новая
       9

Amcharts 4 загрузки данных и частичной конфигурации с удаленного

0 голосов
/ 05 января 2019

Я начинаю немного поиграть с библиотекой amchart4 для проекта, над которым я работаю, но застрял в проблеме и не нашел ни одного хорошего учебника или помощи по Интернету. Amchart 4 имеет возможность загружать конфигурацию для графика через json и загружать данные через удаленный json, но я не могу найти способ загрузить данные графика и частичную конфигурацию из удаленного json. У меня есть график, который в зависимости от выбора должен показывать разные метки на оси х, поскольку детализация информации различна. Мой код dows не дает никаких ошибок в консоли, но график просто пуст, только с полосой прокрутки над белой областью. После моего 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"
            }
        }
    ]
}
...