在 amCharts 中查看的动态 ASHX 数据

Question

我正在使用 .ashx 数据处理程序，它成功地调用了 returns 有效的 JSON 格式（使用 http://www.freeformatter.com/json-validator.html 确认）。

我想在 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，然后将 dataProvider 替换为 dataLoader 信息，如下所示：

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
  },
} );

Data Loader 默认需要 JSON 个数据，因此您无需设置任何其他选项。

在 amCharts 中查看的动态 ASHX 数据

Dynamic ASHX Data Viewed In amCharts

javascript

json

ashx

amcharts