使用函数中的数据加载器时未显示 Amchart答案

【问题标题】：Amchart not getting displayed when using dataloader from a function使用函数中的数据加载器时未显示 Amchart
【发布时间】：2017-03-03 05:17:16
【问题描述】：

我正在调用将函数返回到 amchart 数据加载器。该函数在单击按钮时被调用。单击该按钮也会调用图表。但问题是我没有得到图表。

 function myFunction() {
              var edited = "[{";
                for(var i=0;i<3;i++) {
              var one = document.getElementById("testid"+i).value;
              var two =  document.getElementById("testavg"+i).value;
              edited += '"'+"Test_Id"+'":"'+one+'",'+'"Test_Average"'+':'+two+'},{';
                }
              edited = edited.slice(0,-2);
              edited += "]";
              alert(edited);
              return edited;  
              }


            function charts(){
            var chartDataa = myFunction();  
            var chart = AmCharts.makeChart( "chartdiv", {
                  "type": "serial",
                  "theme": "light",
                  "dataProvider": chartDataa,
                  "valueAxes": [ {
                    "gridColor": "#FFFFFF",
                    "gridAlpha": 0.2,
                    "dashLength": 0
                  } ],
                  "gridAboveGraphs": true,
                  "startDuration": 1,
                  "graphs": [ {
                    "balloonText": "[[category]]: <b>[[value]]</b>",
                    "fillAlphas": 0.8,
                    "lineAlpha": 0.2,
                    "type": "column",
                    "valueField": "Test_Average"
                  } ],
                  "chartCursor": {
                    "categoryBalloonEnabled": false,
                    "cursorAlpha": 0,
                    "zoomable": false
                  },
                  "categoryField": "Test_Id",
                  "categoryAxis": {
                    "gridPosition": "start",
                    "gridAlpha": 0,
                    "tickPosition": "start",
                    "tickLength": 20
                  },
                  "export": {
                    "enabled": true
                  }
                });
  }

The chart that I am getting right now looks like this

【问题讨论】：

标签： javascript html jsp servlets amcharts

【解决方案1】：

您的函数myFunction 返回一个 JSON 字符串。 amCharts dataProvider prop 需要一个对象数组（一个 JS 对象，而不是 JSON 字符串）。尝试将您的 myFunction 更改为创建包含数据对象的数组的函数。（我还建议将其重命名为更具描述性的名称）。你可以这样做：

function getChartData() {
          var dataprovider = [];
          for(var i = 0; i < 3; i++) {

            dataprovider.push({
              "Test_Id": document.getElementById("testid"+i).value,
              "Test_Average": document.getElementById("testavg"+i).value
            });

          }

          return dataprovider; 
}


function charts(){
        var chartData = getChartData();  
        var chart = AmCharts.makeChart( "chartdiv", {
              "type": "serial",
              "theme": "light",
              "dataProvider": chartData,
              "valueAxes": [ {
                "gridColor": "#FFFFFF",
                "gridAlpha": 0.2,
                "dashLength": 0
              } ],
              "gridAboveGraphs": true,
              "startDuration": 1,
              "graphs": [ {
                "balloonText": "[[category]]: <b>[[value]]</b>",
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "Test_Average"
              } ],
              "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
              },
              "categoryField": "Test_Id",
              "categoryAxis": {
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20
              },
              "export": {
                "enabled": true
              }
            });
}

您也可以按原样编写代码，并将myFunction 的最后一行更改为：return JSON.parse(edited);

【讨论】：