如何从数组创建莫里斯.js图表
How to create a morris.js chart from array?
我在从数组中获取数据以在morris.js
图表中正确显示时遇到问题。
从这个代码片段中可以看出,图表上只输出了最后一个对象:
例:
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
只输出图表中的最后一个对象呢?
请尝试以下操作:
//......
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>
相关文章:
- 装订莫里斯甜甜圈图
- 如何在一页上多次使用一个图1次莫里斯JS
- 莫里斯.js甜甜圈标签不在中间的jquery标签中
- 如何在莫里斯.js中更改填充区域的颜色
- 如何调整莫里斯的大小.js容器尺寸更改图表
- 如何对莫里斯条形图进行动画处理
- 莫里斯折线图不起作用
- 莫里斯.js虚线网格线
- 莫里斯.JS在 xPages 刷新中
- 莫里斯图形导出为PDF
- 莫里斯图表显示图表下的代码
- 控制莫里斯甜甜圈图的维度,即高度& &;宽度
- 在莫里斯柱状图中复制月数据到堆栈中
- 在一个元素中合并两个莫里斯图
- 使用less/scss/sass插件包含颜色,如莫里斯图表
- 点击莫里斯饼段时显示模式
- 如何在渲染莫里斯图之前过滤对象数组
- 莫里斯图表悬停点大小
- 莫里斯.js甜甜圈标签
- 如何从数组创建莫里斯.js图表