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，则我的新图表不会被覆盖。

有人对此有解决方案吗？

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

无法根据下拉选择内容用新的Amchar覆盖现有的Bar Amchart

1 个答案: