Question

我在我的应用程序项目中使用了Morris图表来显示有关销售数量的一些细节。执行AJAX请求后，图表以无序方式显示数据。它不显示每个城市的销售额。我想像静态数据http://jsfiddle.net/marsi/LaJXP/1/

这样显示它们

var json = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': 'sales.php',
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });

        return json;
    })
    ();


    Morris.Area({
    element: 'graph-area',
    padding: 10,
    behaveLikeLine: true,
    gridEnabled: false,
    gridLineColor: '#dddddd',
    axes: true,
    fillOpacity:.7,
    data:json,
    lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
    xkey: 'data',
    ykeys:['cityname','total'],
    labels: ['city','total'],

    pointSize: 0,
    lineWidth: 0,
    hideHover: 'auto'
});


<div id="graph-area"></div>

json文件（sales.php）的结果如下：

[{"cityname":"Modena","total":"810.82","data":"2014-02-05 16:55:52"},
 {"cityname":"Bologna","total":"396.22","data":"2014-02-09 23:58:20"},
 {"cityname":"Rimini","total":"380.00","data":"2014-02-10 10:36:12"},
 {"cityname":"Bologna","total":"736.30","data":"2014-02-10 23:30:58"},
 {"cityname":"Bologna","total":"0.00","data":"2014-02-12 23:41:52"},
 {"cityname":"Modena","total":"0.00","data":"2014-02-13 15:21:17"}]

Answer 1

你必须在Morris.Area中使用json对象

使用

 var result = JSON.parse(json); 

 Morris.Area({
    element: 'graph-area',
    padding: 10,
    behaveLikeLine: true,
    gridEnabled: false,
    gridLineColor: '#dddddd',
    axes: true,
    fillOpacity:.7,
    data:result ,
    lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
    xkey: 'data',
    ykeys:['cityname','total'],
    labels: ['city','total'],

    pointSize: 0,
    lineWidth: 0,
    hideHover: 'auto'
});

Answer 2

我认为你的问题在于：

xkey: 'data',

应该是

xkey: 'cityname'

和Y键：

ykeys:['total'],

Answer 3

这就是我做的。使用Java，Spring和Morris图表

This is the controler sudocode :
    @RequestMapping(value = "/shellMarketingControls/getDatForChart", method = RequestMethod.POST)
    public @ResponseBody List<MorrisSingleLine> getDatForChart(@RequestBody String get_value_type, Principal principal)
            throws Exception {
List<MorrisSingleLine> temp = new ArrayList<MorrisSingleLine>();
.......
return temp;

这是对象：

@JsonAutoDetect
@EnableWebMvc
public class MorrisSingleLine implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 4992047206653043217L;
    private Number xaxis;
    private Number yaxis;

    @JsonView(Views.Public.class)
    public Number getXaxis() {
        return xaxis;
    }
    public void setXaxis(Number xaxis) {
        this.xaxis = xaxis;
    }
    @JsonView(Views.Public.class)
    public Number getYaxis() {
        return yaxis;
    }
    public void setYaxis(Number yaxis) {
        this.yaxis = yaxis;
    }
}
}

最后是JavaScript

function getDatForChart(get_value_type) {
        $
                .ajax({
                    contentType : "application/json",
                    url : "${pageContext.request.contextPath}/pathToYourController/yourControllermethod",
                    dataType : 'JSON',
                    type : 'POST',
                    data : JSON.stringify(get_value_type),
                    //timeout : 10000,
                    success : function(response){
                        var result = {
                                feed: {
                                    entries: []
                                }
                            };
                         var count=0;
                         for(count; count<(response.length);count++){
                            var tl="";
                            var tv=0;
                            tl=response[count].xaxis;
                            tv=response[count].yaxis;
                            result.feed.entries.push({
                                    year: tl,
                                    value: tv   
                                    });
                         }
                         console.log(result);
                         drawMorrisCharts(result);
                    },
                    error : function() {
                        alert('Error');
                    }
                });
    };
    function drawMorrisCharts(response) {
        $('#morris-one-line-chart').empty();

        Morris.Line({
            element : 'morris-one-line-chart',
            data : response.feed.entries,
            xkey : 'year',
            ykeys : [ 'value' ],
            resize : true,
            lineWidth : 4,
            labels : [ 'Value' ],
            lineColors : [ '#85CE36'],
            pointSize : 5,
        });

    }

带有动态数据的Morris图表

3 个答案: