如何绘制一个简单的条形图,其中每个条形图有不同的颜色?

时间:2014-04-18 04:29:33

标签: d3.js dimple.js

Dimple的网站显示了一个简单条形图的示例[1],其中x值和y值来自两个变量:

[{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>},
{x:<height val>, y:<bar location>}]

此图表显示数组中每个元素的一个条形,该元素描述了位置和高度。这似乎假设会有大量的条形图并且似乎不是为每个条形图赋予不同颜色的方式(也是图例中的不同条目)。

我的数据看起来更像是这样:

{jimmy:26, tommy:34, jenny:54, bobby:12}

我想显示一个带有四个条形图的图表,每个条形图都有不同的颜色。我希望能够添加颜色与名称对应的图例。

我该怎么做?我添加了一个非null的addSeries参数,但是我不能让它显示两个以上的值。有什么想法吗?

[1] http://dimplejs.org/examples_viewer.html?id=bars_vertical

1 个答案:

答案 0 :(得分:1)

这是一个plunker,其中包含您正在寻找的解决方案......以下是关键代码添加:

var names = myChart.addSeries(["name"], dimple.plot.bar);
myChart.addLegend(10, 50, 510, 20, "middle", [names]);