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

在回答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]);

这两行均根据分配的最新colorAxis进行着色：



（jsFiddle）

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

最佳答案

我想我已经大致了解了这里发生的事情：

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。

关于javascript - 将多个colorAxis对象应用于dimple.js中的线图和气泡图时的行为不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30174657/