javascript - dimple.js中如何使用series.stack = false来抑制聚合；每个系列的不同符号

Question

我正在尝试使用 dimple.js 的 s3.stacked = false 切换来抑制给定月份的数据聚合，但它不会这样做。如何在 dimple.js 中正确地进行聚合抑制？下面的代码不应将 05/2013 的利润相加，至少那是我想要实现的。

我尝试在 s3 = chart.addSeries("Profit in each unit", dimple.plot.bubble, [x,y3]); 中使用“Profit”而不是“Profit in each unit”，然后就没有聚合了，但是气泡在 s3 系列中改变了颜色。如何在“每个单位的利润”气泡中实现一种颜色且不聚合？

另外，除了气泡之外，是否可以为每个系列使用不同的符号，如正方形、菱形等？

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

Answer 1

您已经接近答案了，您确实需要在 addSeries 的第一个参数中指定利润，但该参数可以采用数组，并且只有数组的最后一个元素定义颜色，因此您可以在其中包含标签:

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

stacked 属性是关于元素的定位而不是数据集的聚合，因此在这里对您没有帮助。

Dimple 提供的绘图方法不支持其他形状，但是您可以制作自己的形状并将其提供给 addSeries 的第二个参数。要制作一个完整的系列绘图仪，您应该复制气泡图源 (https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js) 并修改它以绘制您喜欢的任何内容。然而，这可能会变得棘手。

如果您不关心某些功能(例如工具提示、动画、重复绘制等)，您可以将它们删除，并将代码减少到非常少的程度。这是绘制星星的最基本绘图仪:

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