javascript - 无法根据下拉选择用新的 amchart 覆盖现有的 bar amchart

Question

我正在根据当前财政年度（即 2018-2019 年）单击按钮填充 amcharts。代码如下：

function populateChartsBarFY(requestUriFY) {
var chartDataResults2 = [];
var AmountCollectedFYBar = 0;
$.ajax({
    url: requestUriFY,
    type: "GET",
    async: false,
    headers: { "ACCEPT": "application/json;odata=verbose" },
    success: function (data) {
        var dataResults = data.d.results;
        var clr;
        for (i = 0; i < dataResults.length; i++) {
            var chartItems = dataResults[i];         
            var dist = chartItems.District;
            var MineralCategory = chartItems.MineralCategory;
            AmountCollectedFYBar = parseFloat(chartItems.LastMonthCollection);
            if (MineralCategory == "Major" ) {
                clr = "#67B7DC";                
            }
            else if (MineralCategory == "Minor" ) {
                clr = "#FDD302";        
            }
            else if (MineralCategory == "Others" ) {           
                clr = "#83B762";            
            }
            var flag = false;
            for (var j = 0; j < chartDataResults2.length; j++) {
                if (chartDataResults2[j].MineralCategory == MineralCategory) {
                    chartDataResults2[j].AmountCollected = (chartDataResults2[j].AmountCollected + AmountCollectedFYBar);
                    chartDataResults2[j].balloonTextField=( dist + "," + MineralCategory + "," + (chartDataResults2[j].AmountCollected));
                    flag = true;
                }
            }
            if (flag == false) {
                chartDataResults2.push({
                    States: dist,
                    MineralCategory : MineralCategory,
                    AmountCollected: AmountCollectedFYBar,
                    "color": clr,
                    balloonTextField: dist + "," + MineralCategory + "," + AmountCollectedFYBar,
                });
            }

            AmCharts.ready(function () {
                // SERIAL CHART
                AmCharts.makeChart("chartdivdistFY", {
               type: "serial",               
              dataProvider: chartDataResults2,
              categoryField: "MineralCategory",
              categoryAxis: {
              labelRotation: 90,
              gridPosition: "start",
             gridThickness: 0,
             },              
              graphs: [ {
            valueField: "AmountCollected",
             type: "column",
              fillAlphas: 0.8,                
                colorField: "color",
                balloonText :"[[balloonTextField]]",
               labelText : "[[value]]",          
                type : "column",
                lineAlpha :0,               
                fixedColumnWidth :25
           } ],
         chartCursor: {
         cursorPosition: "mouse"
         },
         valueAxis:
         {
             dashLength:5,
             title:"Collected Amount",
            gridThickness:0,
             axisAlpha:0,
         },
         }); 

            });// JavaScript source code
        } // for
    }, //success
}); //ajax  
AmountCollectedFYBar = 0;
} //populate charts

如果我从下拉列表中将当前年份选择值从“2018-2019”更改为“2015-2016”并将其传递给 requestUriFY，我的新图表不会被覆盖。

有人对此有任何解决方案吗？

标签： javascriptajaxamcharts

Answer 1

您的代码有一些问题：

1)AmCharts.ready只是一个window.onload/$(document).ready赋值。它仅AmCharts.ready在页面加载时运行内部代码，因此再次调用它不会执行任何操作。将AmCharts.makeChart呼叫移出AmCharts.ready将解决您的部分问题。

2）您在构建数据时在 for 循环中创建相同的图表，这根本没有意义。将调用移到循环之外，以便在将数据完全分配给数组AmCharts.makeChart后仅调用一次。chartDataResults2

3) 您在同一个 div 中重新创建图表而不清除前一个实例，这将消耗更多资源，并且由于前一个图表实例试图重绘自身而导致视觉伪影。我建议将图表引用存储在全局中并存储AmCharts.makeChart第一次加载时返回的图表对象，然后直接更新 dataProvider 并validateData()在从下拉列表中再次调用该函数时调用以使用新数据重绘图表。

完整修复如下：

var chart; //store the chart in a global that your populate function can refer to

function populateChartsBarFY(requestUriFY) {
  var chartDataResults2 = [];
  var AmountCollectedFYBar = 0;
  $.ajax({
    url: requestUriFY,
    type: "GET",
    async: false,
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    success: function(data) {
      var dataResults = data.d.results;
      var clr;
      for (i = 0; i < dataResults.length; i++) {
        var chartItems = dataResults[i];
        var dist = chartItems.District;
        var MineralCategory = chartItems.MineralCategory;
        AmountCollectedFYBar = parseFloat(chartItems.LastMonthCollection);
        if (MineralCategory == "Major") {
          clr = "#67B7DC";
        } else if (MineralCategory == "Minor") {
          clr = "#FDD302";
        } else if (MineralCategory == "Others") {
          clr = "#83B762";
        }
        var flag = false;
        for (var j = 0; j < chartDataResults2.length; j++) {
          if (chartDataResults2[j].MineralCategory == MineralCategory) {
            chartDataResults2[j].AmountCollected = (chartDataResults2[j].AmountCollected + AmountCollectedFYBar);
            chartDataResults2[j].balloonTextField = (dist + "," + MineralCategory + "," + (chartDataResults2[j].AmountCollected));
            flag = true;
          }
        }
        if (flag == false) {
          chartDataResults2.push({
            States: dist,
            MineralCategory: MineralCategory,
            AmountCollected: AmountCollectedFYBar,
            "color": clr,
            balloonTextField: dist + "," + MineralCategory + "," + AmountCollectedFYBar,
          });
        } 

      } // for

      if (!chart) { //if the chart variable isn't defined, do the first makeChart call and store the reference
        // SERIAL CHART
        chart = AmCharts.makeChart("chartdivdistFY", {
          type: "serial",
          dataProvider: chartDataResults2,
          categoryField: "MineralCategory",
          categoryAxis: {
            labelRotation: 90,
            gridPosition: "start",
            gridThickness: 0,
          },
          graphs: [{
            valueField: "AmountCollected",
            type: "column",
            fillAlphas: 0.8,
            colorField: "color",
            balloonText: "[[balloonTextField]]",
            labelText: "[[value]]",
            type: "column",
            lineAlpha: 0,
            fixedColumnWidth: 25
          }],
          chartCursor: {
            cursorPosition: "mouse"
          },
          valueAxis: {
            dashLength: 5,
            title: "Collected Amount",
            gridThickness: 0,
            axisAlpha: 0,
          },
        });
      }
      else {
        //if the chart is defined, update the dataProvider with your new array and redraw with validateData:
        chart.dataProvider = chartDataResults2;
        chart.validateData()
      }

    }, //success
  }); //ajax  
  AmountCollectedFYBar = 0;
} //populate charts