如何从数组创建 morris.js 图表？答案

【问题标题】：How to create a morris.js chart from array?如何从数组创建 morris.js 图表？
【发布时间】：2016-07-16 12:33:54
【问题描述】：

我在从数组中获取数据以在 morris.js 图表中正确显示时遇到问题。

从这个 sn-p 可以看出，图表上只输出最后一个对象：

示例：

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var dates = ['2015-01','2016-01','2016-03'];
var valueA = ['10','30','60'];
var valueB = ['100','50','70'];

var z=0;

for (tot=dates.length; z < tot; z++) {
  var myArray = [{'d': dates[z], 'a': valueA[z], 'b': valueB[z]}];
}

Morris.Bar({
    element: 'morris-bar-chart',
    data: myArray,
    xkey: 'd',
    ykeys: ['a', 'b'],
    labels: ['2014', '2015'],
    xLabelFormat: function (x) { // <-- changed
        console.log("this is the new object:" + x);
        var month = months[x.x];
        return month;
    },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet" />
<script src="http://cdn.oesmith.co.uk/morris-0.5.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="morris-bar-chart" style="height: 250px;"></div>

我的数组myArray 在for 循环中有3 个对象，那么为什么morris.js 只输出图表中的最后一个对象？

【问题讨论】：

标签： javascript jquery morris.js

【解决方案1】：

请试试这个：

//......
var myArray = [];
for (tot=dates.length; z < tot; z++) {
   myArray.push({'d': dates[z], 'a': valueA[z], 'b': valueB[z]});
}
//......

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var dates = ['2015-01','2016-01','2016-03'];
var valueA = ['10','30','60'];
var valueB = ['100','50','70'];

var z=0;
var myArray = [];

for (tot=dates.length; z < tot; z++) {
   myArray.push({'d': dates[z], 'a': valueA[z], 'b': valueB[z]});
}

Morris.Bar({
    element: 'morris-bar-chart',
    data: myArray,
    xkey: 'd',
    ykeys: ['a', 'b'],
    labels: ['2014', '2015'],
    xLabelFormat: function (x) { // <-- changed
        console.log("this is the new object:" + x);
        var month = months[x.x];
        return month;
    },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet" />
<script src="http://cdn.oesmith.co.uk/morris-0.5.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="morris-bar-chart" style="height: 250px;"></div>

【讨论】：