如何在dimple.js中用不同的颜色为不同的数据集着色 [英] How to color different data sets with different colors in dimple.js

问题描述

我使用的是另一篇文章的数据和dimple.js脚本：

I am using another post's data and dimple.js script:

在dimplejs中的多系列

如果您在该帖子中使用原始的未骇客数据，和收入不同，也就是说，如何为y1和y3使用两种不同的颜色？似乎dimple不支持这个，通过纯粹的哲学。

If you use the original unhacked data in that post, how do you color profit and revenue differently, that is, how can you use two different colors for y1 and y3? It seems like dimple does not support this, by sheer philosophy.

推荐答案

重新组织数据，版本的凹坑因为引入复合轴。现在可以这样实现：

Restructuring the data as in that answer is not required with newer versions of dimple because of the introduction of composite axes. It could now be achieved like this:

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

正如你所看到的， ve也按照你的问题给系列分配了一些颜色。第一个参数是系列颜色标识符（在本例中是应用于每个系列的标签），第二个是填充，第三个是笔触，第四个是不透明度。

As you can see I've also assigned some colours to the series as per your question. The first parameter is the series colour identifier (in this case the label applied to each series), the second is fill, third is stroke and fourth is opacity.

gotcha这里是用于线（以及因此的颜色系列的键）的标签本身不能是数据中的维名称（否则dimple将尝试按其值分解）。如果需要，尾随空格可以区分它们。

The only gotcha here is that the labels used for the lines (and therefore the keys to colour the series) can't themselves be dimension names in the data (otherwise dimple will try to disaggregate by their values). A trailing space works to differentiate them if necessary.

编辑：我把错误的链接放在

I put the wrong link in

这篇关于如何在dimple.js中用不同的颜色为不同的数据集着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！