javascript - 从函数中使用数据加载器时，Amchart 未显示

Question

我正在调用 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

Answer 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);