[英]How to create a morris.js chart from array?
I am having an issue getting data from array to show correctly in a morris.js
chart. 我在从数组获取数据以在
morris.js
图表中正确显示时遇到问题。
As you can see from this snippet only the last object is output on chart: 从该片段中可以看到,只有最后一个对象在图表上输出:
Example: 例:
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[xx]; 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>
My array called myArray
has 3 objects in a for loop, so why morris.js
output only the last one in chart? 我的数组
myArray
在for循环中有3个对象,那么为什么morris.js
仅输出图表中的最后一个对象?
Please try this: 请尝试以下方法:
//......
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[xx]; 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.