如何在dimple.js中用不同颜色为不同的数据集着色

Question

我正在使用另一个帖子的数据和dimple.js 脚本：

Multi-series in dimplejs

如果您使用该帖子中未经破解的原始数据，您如何对利润和收入进行不同的着色，也就是说，您如何为 y1 和 y3 使用两种不同的颜色？就纯粹的哲学而言，酒窝似乎不支持这一点。

Answer 1

由于引入了复合轴，因此较新版本的凹坑不需要像该答案中那样重构数据。现在可以这样实现：

var svg = dimple.newSvg("body", 800, 400);

var data = [
  {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
  {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
  {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
  {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
  {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]

var chart = new dimple.chart(svg, data);

chart.setBounds(60,20,680,330);

var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
var y2 = chart.addMeasureAxis("y", "Units");
var y3 = chart.addMeasureAxis(y1, "Profit");
chart.addSeries("Sales Units", dimple.plot.bar, [x,y2]);
chart.addSeries("Sales Revenue", dimple.plot.line, [x,y1]);
chart.addSeries("Gross Profit", dimple.plot.bubble, [x,y3]);

chart.assignColor("Sales Units", "white", "red", 0.5);
chart.assignColor("Sales Revenue", "#FF00FF");
chart.assignColor("Gross Profit", "green");

x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");

chart.draw();

http://jsbin.com/mafegu/2/edit?js,output

如您所见，我还根据您的问题为该系列分配了一些颜色。第一个参数是系列颜色标识符（在这种情况下是应用于每个系列的标签），第二个是填充，第三个是描边，第四个是不透明度。

这里唯一的问题是用于线条的标签（以及因此为系列着色的键）本身不能是数据中的维度名称（否则酒窝将尝试按其值分解）。如有必要，尾随空格可用于区分它们。

编辑：我放错了链接

Answer 2

这种行为可以通过轻微滥用dimple 的colorAxis 功能来实现。颜色轴应该是第三个轴，您可以将其添加到系列中，以根据某个值在给定范围内更改颜色。但是，您可以通过将其范围的起点和终点指定为相同的颜色来强制 colorAxis 为恒定颜色。如果您以这种方式为每个系列创建单色 colorAxis，则可以为每个系列分配不同的颜色：

重要提示：这适用于气泡图系列。但是，由于我仍然不清楚的原因，如果您尝试将不同的 colorAxis 对象分配给不同的折线图系列，它们都会被赋予最后一个分配的颜色。

代码如下：

var svg = dimple.newSvg("body", 800, 400);

var data = [
    {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
    {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
    {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
    {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
    {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]

var chart = new dimple.chart(svg, data);

chart.setBounds(60,20,680,330);

var x = chart.addCategoryAxis("x", "Month");

var prof = chart.addColorAxis("Profit", ["green", "green"])
var rev = chart.addColorAxis("Profit", ["black", "black"])
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.bubble, [x,y1, prof]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.bubble, [x,y3, rev]);

x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");

chart.draw();

(jsFiddle here)