Question

我正在使用成功调用并返回有效JSON格式的.ashx数据处理程序（使用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数据

1 个答案: