从Amcharts中的getJSON转换时,ajax调用不起作用

时间:2017-03-09 06:50:51

标签: javascript jquery ajax amcharts

这是javascript文件中的ajax调用方法,用于在Amcharts中绘制条形图。

bar.js

plot_graph();

function plot_graph(){

$.ajax({ 


    url:back+"/cool?day=30",

    type: "GET",
    dataformat: "JSON",



    success: function(data){
        alert("succes while plotting down graph");

        var amc=AmCharts.makeChart("plot",
                {
            "type": "serial",

              "dataSets": [{
                "dataProvider": data,
                "categoryField": "time"
              }],
            "categoryField": "name",
            "startDuration": 1,
            "categoryAxis": {
                "gridPosition": "start"
            },
            "trendLines": [],
            "graphs": [
                {
                    "balloonText": "[[title]] of [[category]]:[[value]]",
                    "fillAlphas": 0.8,
                    "lineAlpha": 0.2,
                    "id": "AmGraph-1",
                    "title": "Bar Graph",
                    "type": "column",
                    "valueField": "tips",
                    "color":"#6fdc6f"
                },
                {
                    "balloonText": "[[title]] of [[category]]:[[value]] k",
                    "fillAlphas": 1,
                    "id": "AmGraph-2",
                    "title": "Distance",
                    "type": "column",
                    "valueField": "mile"
                }
            ],
            "guides": [],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "Milage",
                    "gridColor": "#FFFFFF",
                    "gridAlpha": 0.2

                }
            ],
            "gridAboveGraphs": true,
            "allLabels": [],
            "balloon": {},
            "legend": {
                "enabled": true,
                "useGraphSettings": true
            },
            "titles": [
                {
                    "id": "Title-1",
                    "size": 15,
                    "text": " Cool"
                }
            ]

        });

      },
    error:function(){

        alert("error while plotting down graph");

    }  
    });

}

但是,当我访问webservice api时,它会显示数据并显示警告框,并显示"成功同时绘制图表"但是图表不是plotting。 任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

dataSets是股票图表属性,而不是序列图属性(请注意您的图表type)。您需要设置dataProvider,并将categoryField设置为配置的顶级:

var amc = AmCharts.makeChart("plot", {
  // ...
  "dataProvider": data,
  "categoryField": "time",
  // ..
});

请注意,只允许使用一个categoryField,而不是两个。