将变量数据设置为morris.bar
将变量数据设置为morris.bar
提问于 2018-05-30 14:17:56
我必须用莫里斯绘制一个条形图，但是数据是动态的，我不知道我要画多少标签等等。
通常，您构建这样的图表时：
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="bar-example" style="height: 250px;"></div>
但我不知道我是否有a和b，或a，b和c，或a，b，c和d，甚至更多。我怎样才能做到这一点？
我传递的数据是一个包含一个标签和一个值列表的类，因此我可以在每个标签上绘制多个条形图。这里的问题是，当数据在运行时生成时，我不知道要绘制多少条。
编辑：
我从控制器中传递数据如下：
[{"label":"Cats","values":[57,92,94]},{"label":"Dogs","values":[85,78,53]},{"label":"Birds","values":[81,57,70]}]到目前为止，如果我将标签作为String数组发送，则可以绘制它们，但是如果我发送了一个由3个元素组成的数组，它将显示第一个元素，然后再添加三个“未定义”标签。
通过这种数据结构，我可以在x轴上看到“猫”、“狗”和“鸟”，如果我设置：
xkey: 'label',回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-30 17:24:47
看我的图表，我不认为我完全捕捉到了你想要展示的东西，但希望它能让轮子旋转。您可以通过ajax获取数据，然后通过调用下面定义为createChart()的函数动态创建图表。我创建了一个虚拟的自动执行函数，它在示例中传递数据：
// dummy function to call createChart()
(function() {
let data = `[
{ "label": "Cats", "values": [57, 92, 94] },
{ "label": "Dogs", "values": [85, 78, 53] },
{ "label": "Birds", "values": [81, 57, 70] }]`;
createChart(data);
})();
function createChart(data) {
data = JSON.parse(data);
let labels = data.map(obj => obj.label);
// Generte n keys
let ykeys = data[0].values.map((obj, i) => 'val' + i);
let values = data.map(function(obj) {
let map = {
label: obj.label
}
obj.values.forEach(function(obj, i) {
map[ykeys[i]] = obj;
});
return map;
});
Morris.Bar({
element: 'bar-example',
data: values,
xkey: 'label',
ykeys: ykeys,
labels: labels
});
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="bar-example" style="height: 250px;"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50607038
复制相关文章
相似问题
腾讯云开发者
