Amchart dataLoader 动态向下钻取

Question

基于本教程https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/, I am able to load the data by calling a php page using dataLoader into this kind of chart https://www.amcharts.com/demos/combined-bullet-column-line-chart/

我的要求：

单击图表中的列时，需要调用另一个 php 文件以根据图表中的选择使用不同的查询来获取数据（这将用作查询）。

我尝试了以下代码，但没有任何效果

  var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "light",
            "dataDateFormat": "MM-YYYY",
            "precision": 2,
            "valueAxes": [{
                "id": "v1",
                "title": "Average",
                "position": "left",
                "autoGridCount": false,
                "labelFunction": function(value) {
                    return  Math.round(value) ;
                }
            }, {
                "id": "v2",
                "title": "Maximum",
                "gridAlpha": 0,
                "position": "right",
                "autoGridCount": false
            }],
            "graphs": [{
                "id": "g3",
                "valueAxis": "v1",
                "lineColor": "#e1ede9",
                "fillColors": "#e1ede9",
                "fillAlphas": 1,
                "type": "column",
                "title": "Actual Average",
                "valueField": "Average",
                "clustered": false,
                "columnWidth": 12,
                "legendValueText": "[[value]]",
                "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
            }, {
                "id": "g4",
                "valueAxis": "v1",
                "lineColor": "#62cf73",
                "fillColors": "#62cf73",
                "fillAlphas": 1,
                "type": "column",
                "title": "Actual Maximum",
                "valueField":"Maximum",
                "clustered": false,
                "columnWidth":8,
                "legendValueText": "[[value]]",
                "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
            }, {
                "id": "g1",
                "valueAxis": "v2",
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "bulletSize": 5,
                "hideBulletsCount": 50,
                "lineThickness": 2,
                "lineColor": "#20acd4",
                "type": "smoothedLine",
                "title": "Target Average",
                "useLineColorForBulletBorder": true,
                "valueField": "Average",
                "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
            }, {
                "id": "g2",
                "valueAxis": "v2",
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "bulletSize": 5,
                "hideBulletsCount": 50,
                "lineThickness": 2,
                "lineColor": "#e1ede9",
                "type": "smoothedLine",
                "dashLength": 5,
                "title": "Target Maximum",
                "useLineColorForBulletBorder": true,
                "valueField": "Maximum",
                "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
            }],
            "chartScrollbar": {
                "graph": "g1",
                "oppositeAxis": false,
                "offset": 30,
                "scrollbarHeight": 50,
                "backgroundAlpha": 0,
                "selectedBackgroundAlpha": 0.1,
                "selectedBackgroundColor": "#888888",
                "graphFillAlpha": 0,
                "graphLineAlpha": 0.5,
                "selectedGraphFillAlpha": 0,
                "selectedGraphLineAlpha": 1,
                "autoGridCount": true,
                "color": "#AAAAAA"
            },
            "chartCursor": {
                "pan": true,
                "valueLineEnabled": true,
                "valueLineBalloonEnabled": true,
                "cursorAlpha": 0,
                "valueLineAlpha": 0.2
            },
            "categoryField": "Month",
            "categoryAxis": {
                "parseDates": true,
                "dashLength":1,
                "minorGridEnabled": true
            },
            "legend": {
                "useGraphSettings": true,
                "position": "top"
            },
            "balloon": {
                "borderThickness": 1,
                "shadowAlpha": 0
            },
            "export": {
                "enabled": true
            },
            //"dataProvider":[{"Month":"01-2016","Average":43.63888889,"Maximum":50.06222222,"Province":"Riyadh"},{"Month":"02-2016","Average":46.11888889,"Maximum":52.78222222,"Province":"Eastern Province"},{"Month":"03-2016","Average":48.33740741,"Maximum":49.78555556,"Province":"Eastern Province"},{"Month":"04-2016","Average":39.37629630,"Maximum":41.25111111,"Province":"Eastern Province"},{"Month":"05-2016","Average":43.98481481,"Maximum":54.25000000,"Province":"Eastern Province"},{"Month":"06-2016","Average":49.68888889,"Maximum":71.53777778,"Province":"Riyadh"},{"Month":"07-2016","Average":39.92333333,"Maximum":44.52111111,"Province":"Eastern Province"},{"Month":"08-2016","Average":48.72370370,"Maximum":58.98222222,"Province":"Makkah"},{"Month":"09-2016","Average":34.18370370,"Maximum":43.88111111,"Province":"Makkah"},{"Month":"10-2016","Average":48.77962963,"Maximum":63.22333333,"Province":"Makkah"}]
            "dataLoader": {"url": "bed-turnover.php"}

        });

        chart.addListener("clickGraphItem", function (event) {
            // let's look if the clicked graph item had any subdata to drill-down into
                // wow it has!
                // let's set that as chart's
            //chart.dataLoader.loadFile("bed-turnover-drill-province.php");
            //  event.chart.dataLoader ={"url": "bed-turnover-drill-province.php"};
             //   event.chart.validateData();

            chart.dataLoader = { url: "bed-turnover-drill-province.php"}
            //chart.validateData();
        };

        });

请帮忙。

此致

Answer 1

将 URL 更改为从新源加载后，您必须调用 dataLoader 的 loadData 方法：

chart.addListener("clickGraphItem", function (event) {
    chart.dataLoader.url = "bed-turnover-drill-province.php";
    chart.dataLoader.loadData();
};

Amchart dataLoader 动态向下钻取

Amchart dataLoader to have drilldown dynamically

php

ajax

reload

amcharts

drilldown