dimple.js 中将多个 colorAxis 对象应用于线与气泡图时的行为不一致

Question

在回答 this question 时，我发现 dimple.js 折线图中出现了一些奇怪的行为。我试图想出一种方法来利用 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("Revenue", ["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, rev]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.bubble, [x,y3, prof]);

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

chart.draw();

但是，如果我将系列更改为线条：

var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1, rev]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3, prof]);

两条线都根据最近分配的颜色轴着色：

(jsFiddle)

这是为什么？这是预期的行为吗？

Answer 1

我想我已经大致弄清楚了这里发生了什么：

chart.addSeries() 的第一个参数用作用于跟踪该系列颜色的键。如果你给两个系列相同的键，它们将是相同的颜色，即使那个键是 null （顺便说一下，它不应该是一个字符串，但这不会改变我描述的行为）。这个论点的重点实际上是指定数据应该如何分成组，而 null 只是意味着你不希望它们被分成组。为了实际上有不同的颜色而不是将数据分成组，您需要为每个系列使用不同的字符串，并且它们不需要是数据集中变量的名称：

var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("Revenue label", dimple.plot.line, [x,y1, rev]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("Profit label", dimple.plot.line, [x,y3, prof]);

这里甚至不需要 colorAxis 对象，除非您想为特定的线条分配特定的颜色（您也可以使用 assignColor()）。

对于气泡图，可以使用 colorAxis 覆盖具有相同类别字段的相同颜色的系列着色行为，如我所演示的。对于折线图，它不能。由于这似乎可能是无意的，我已经在 Github.

上提交了 an issue

dimple.js 中将多个 colorAxis 对象应用于线与气泡图时的行为不一致

Inconsistent behavior when applying multiple colorAxis objects to line vs. bubble plots in dimple.js

javascript

d3.js

dimple.js