How to use series.stack = false in dimple.js to suppress aggregation; different symbols for each series

问题

I am trying to suppress aggregation of data for given months using dimple.js' s3.stacked = false toggle, but it won't do so. How to do aggregation suppression properly in dimple.js? The code below should not add up the profit for 05/2013, at least that is what I want to achieve.

I tried to use "Profit" in s3 = chart.addSeries("Profit in each unit", dimple.plot.bubble, [x,y3]); instead of "Profit in each unit" and then there is no aggregation, but the bubbles change colors across the s3 series. How to achieve one color across the "Profit in each unit" bubbles and no aggregation?

Also, is it possible to use different symbols for each series, like squares, diamonds, etc. besides bubbles?

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},
  {"Month":"05/2013", "Revenue":800, "Profit":5300, "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.bubble, [x,y2]);
chart.addSeries("Sales Revenue", dimple.plot.bubble, [x,y1]);
s3 = chart.addSeries("Profit in each unit", dimple.plot.bubble, [x,y3]);
s3.stacked = false;

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

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

chart.draw();

回答1:

You were close to the answer, you do need to specify the profit in the first parameter of addSeries but that parameter can take an array and only the last element of the array defines colour, so you can include your label there:

s3 = chart.addSeries(["Profit", "Profit in each unit"], dimple.plot.bubble, [x,y3]);

The stacked property is about positioning of the elements rather than aggregation of the dataset, so won't help you here.

Dimple doesn't support other shapes with its provided plot methods, however you could make your own and provide it to the second parameter of addSeries. To do a complete series plotter you should take a copy of the bubble plot source (https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js) and modify it to draw whatever you like. However this can get tricky.

If you don't care about certain features (e.g. tooltips, animation, repeated draws etc), you can cut them out and it reduces the code to something very minimal. Here's the most basic plotter for drawing a star:

var myCustomPlotter = {
        stacked: false,
        grouped: false,
        supportedAxes: ["x", "y"],
        draw: function (chart, series, duration) {
            chart._group
                .selectAll(".my-series")
                .data(series._positionData)
                .enter()
                .append("path")
                // Path Generated at http://www.smiffysplace.com/stars.html
                .attr("d", "M 0 10 L 11.756 16.180 L 9.511 3.090 L 19.021 -6.180 L 5.878 -8.090 L 0 -20 L -5.878 -8.090 L -19.021 -6.180 L -9.511 3.090 L -11.756 16.180 L 0 10")
                .attr("transform", function (d) { 
                return "translate(" +
                    dimple._helpers.cx(d, chart, series) + "," + 
                    dimple._helpers.cy(d, chart, series) + ")"; 
                }) 
                .style("fill", "yellow")
                .style("stroke", "orange");
        }
    };

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

来源：https://stackoverflow.com/questions/30173692/how-to-use-series-stack-false-in-dimple-js-to-suppress-aggregation-different