将变量数据设置为 morris.bar

Question

我必须用 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，甚至更多。我该如何实现？

我传递的数据是一个 class，其中包含一个标签和一个值列表，因此我可以为每个标签绘制多个条形图。这里的问题是，由于数据是在运行时生成的，所以我不知道我绘制了多少条柱。

编辑：

我这样从控制器传递数据：

[{"label":"Cats","values":[57,92,94]},{"label":"Dogs","values":[85,78,53]},{"label":"Birds","values":[81,57,70]}]

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

使用该数据结构，如果我设置：

，我可以在 x 轴上看到 "Cats"、"Dogs" 和 "Birds"

xkey: 'label',

Answer 1

查看我的图表，我认为我没有完全捕捉到您要显示的内容，但希望它能让轮子旋转。您可以通过 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>

将变量数据设置为 morris.bar

Setting variable data to morris.bar

javascript

jquery

morris.js