在amCharts中查看动态ASHX数据

Question

我正在使用成功调用并返回有效JSON格式（使用http://www.freeformatter.com/json-validator.html进行确认）的.ashx数据处理程序。

我想在amChart中使用返回的数据。我的图表与硬编码数据正常工作。如何让图表接受动态ashx JSON数据？

<script type="text/javascript"> 
    var chart = AmCharts.makeChart("chartdiv", { 
     "type": "serial", 
     "theme": "light", 
     "marginRight": 70, 
     "dataProvider": [{ 
      "date": "11/04/2014", 
      "val1": 125, 
      "val2": 150 
     }, { 
      "date": "11/05/2014", 
      "val1": 100, 
      "val2": 130 
     }, 
     // ETC 
     ] 
     "valueAxes": [{ 
      "axisAlpha": 0, 
      "position": "left", 
      "title": "Visitors By Date" 
     }], 
     "graphs": [{ 
      "id": "val1", 
      "title": "val1bar", 
      "valueField": "val1", 
      "type": "column", 
      "balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>" 
     }, { 
      "id": "val2", 
      "title": "val2bar", 
      "valueField": "val2", 
      "type": "column", 
      "balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>" 
     }],  
     "chartCursor": { 
      "pan": true, 
      "valueLineEnabled": true, 
      "valueLineBalloonEnabled": true, 
      "cursorAlpha": 0, 
      "valueLineAlpha": 0.2 
     }, 
     "categoryField": "date", 
     "categoryAxis": { 
      "gridPosition": "start", 
      "labelRotation": 45 
     }, 
    }); 
</script> 

Answer 1

可能是你使用来自ASHX JSON输出的最简单的方法是amChart自己Data Loader插件。

基本上你只需要包括amcharts/plugins/dataloader/dataloader.min.js，然后用dataLoader信息替换dataProvider，像这样：

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "marginRight": 70, 
    "dataLoader": { 
    "url": "mydata.ashx" 
    }, 
    "valueAxes": [ { 
    "axisAlpha": 0, 
    "position": "left", 
    "title": "Visitors By Date" 
    } ], 
    "graphs": [ { 
    "id": "val1", 
    "title": "val1bar", 
    "valueField": "val1", 
    "type": "column", 
    "balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>" 
    }, { 
    "id": "val2", 
    "title": "val2bar", 
    "valueField": "val2", 
    "type": "column", 
    "balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>" 
    } ], 
    "chartCursor": { 
    "pan": true, 
    "valueLineEnabled": true, 
    "valueLineBalloonEnabled": true, 
    "cursorAlpha": 0, 
    "valueLineAlpha": 0.2 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
    "gridPosition": "start", 
    "labelRotation": 45 
    }, 
}); 

数据加载程序在默认情况下预计JSON数据，所以你不需要设置任何其他选项。