如何在dimple.js中使用series.stack = false抑制聚合;不同的符号为每个系列 [英] How to use series.stack = false in dimple.js to suppress aggregation; different symbols for each series

问题描述

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

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.

我试图在<$ c中使用利润 $ c> s3 = chart.addSeries（每个单位的利润，dimple.plot.bubble，[x，y3]）; 而不是每个单位的利润 ，但气泡会改变s3系列的颜色。如何在每个单位的利润气泡和没有聚集的情况下实现一种颜色？

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

推荐答案

指定addSeries的第一个参数的利润，但该参数可以接受一个数组，并且只有数组的最后一个元素定义颜色，因此您可以在其中包含您的标签：

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不支持其他形状和它提供的plot方法，但是你可以做自己的，并提供它的addSeries的第二个参数。要做一个完整的系列绘图仪，你应该拿一个气泡图源的副本（ https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js ）并修改它以绘制您喜欢的任何内容。

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

这篇关于如何在dimple.js中使用series.stack = false抑制聚合;不同的符号为每个系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！