具有動態數據的Morris圖表

我在我的應用程序項目中使用了Morris圖表，以顯示有關銷售數量的一些詳細信息。執行AJAX請求後，該圖表表示無序way.It不顯示銷售每個city.I數據要像本實施例中有靜態數據http://jsfiddle.net/marsi/LaJXP/1/具有動態數據的Morris圖表

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"}]

來源

2014-04-16 user3069942

你的數據是錯誤的格式，你需要「重塑」或「旋轉」它。您應該爲每個城市名稱分別填寫每個值。 – marbel

我覺得你的問題就在這裏：

xkey: 'data',

應該是

xkey: 'cityname'

和Y鍵（S）：

ykeys:['total'],

來源

2014-06-17 18:05:57 slaughterize

您必須使用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' 
});

來源

2015-09-08 05:53:22 Lucifer

這是我如何做它。使用Java，Spring和莫里斯圖表

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

    }

來源

2017-01-21 01:05:33

具有動態數據的Morris圖表

回答

相關問題