将变量数据设置为morris.bar

Question

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

通常您使用以下内容构建此类图表：

＆＃13;

＆＃13;

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']
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我不知道我是否有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个元素的数组，它会显示第一个元素，但随后再添加三个元素＆＃34;未定义＆＃ 34;标签

通过这种数据结构，我可以看到＆＃34; Cats＆＃34;，＆＃34; Dogs＆＃34;和＃34; Birds＆＃34;如果我设置了x轴：

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>