2017-03-03 6 views
0

amchart dataloaderに関数の呼び出しを呼び出しています。この関数はボタンをクリックすると呼び出されます。そのボタンをクリックするとチャートが呼び出されます。しかし、問題は私がチャートを取得していないということです。 JSON文字列を返しますmyFunction関数からdataloaderを使用しているときに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

答えて

1

あなたの機能。 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);

関連する問題