时间戳

首页 > 解决方案 > 将变量数据设置为 morris.bar

javascript - 将变量数据设置为 morris.bar

问题描述

我必须用Morris绘制条形图，但是数据是动态的，以至于我不知道要绘制多少标签等...

通常，您使用以下方法构建这样的图表：

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

到目前为止，如果我将标签作为字符串数组发送，我设法绘制了标签，但是如果我发送一个包含 3 个元素的数组，它会按原样显示第一个元素，然后再添加三个“未定义”标签。

使用该数据结构，如果我设置，我可以在 x 轴上看到“Cats”、“Dogs”和“Birds”：

xkey: 'label',

标签： javascriptjquerymorris.js

解决方案

看着我的图表，我认为我并没有完全捕捉到你想要展示的内容，但希望它能让轮子旋转。您可以通过以下方式获取数据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>

推荐阅读