Jak kolorować różne zestawy danych o różnych kolorach w pliku dimple.js - javascript, d3.js, charts, dimple.js

Używam skryptu danych i skryptu dimple.js:

Multi-series w dimplejs

Jeśli używasz w tym oryginalnych, niehakowanych danychpost, w jaki sposób kolorujesz zysk i przychody inaczej, czyli w jaki sposób możesz użyć dwóch różnych kolorów dla y1 i y3? Wydaje się, że dołek nie popiera tego, przez czystą filozofię.

Odpowiedzi:

Restrukturyzacja danych jak w tej odpowiedzi nie jest wymagana w przypadku nowszych wersji wgłębienia ze względu na wprowadzenie osi kompozytowych. Można to teraz osiągnąć w ten sposób:

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

Jak widać, przypisałem również kilka kolorówseria jak na twoje pytanie. Pierwszym parametrem jest kolorowy identyfikator serii (w tym przypadku etykieta zastosowana do każdej serii), druga to wypełnienie, trzecia to kreska, a czwarta to krycie.

Jedynym problemem jest to, że etykiety były używanelinie (a zatem klucze do kolorowania serii) same w sobie mogą być nazwami wymiarów w danych (w innym przypadku dołek spróbuje dokonać dezagregacji według ich wartości) .Sprzednie spacja działa w celu ich rozróżnienia, jeśli to konieczne.

EDYCJA: wstawiłem niewłaściwe łącze

Takie zachowanie można osiągnąć poprzez nieznacznenadużywanie funkcji colorAxis w wgłębieniu Oś koloru ma być trzecią osią, którą można dodać do serii, aby zmienić jej kolor w danym zakresie na podstawie pewnej wartości, jednak można wymusić stałą kolorystyczną kolor, przypisując punkt początkowy i końcowy jego zakresów do tego samego koloru .Jeśli utworzysz jednokolorowy kolor w ten sposób dla każdej serii, możesz przypisać każdy inny kolor:

Ważna uwaga: Działa to dobrze w przypadku serii wykresów bąbelkowych. Jednak z powodów, które pozostają niejasne, jeśli spróbujesz przypisać różne obiekty ColorAxis do różnych serii wykresów liniowych, wszystkie będą miały kolor ostatniego przypisanego.

Oto kod:

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();

(jsZasięgnij tutaj)