如何在dimple.js中使用series.stack = false來抑制聚合;每個系列的不同符號

我試圖使用dimple.js's3.stacked = false切換來抑制給定月份的數據聚合，但它不會這樣做。如何在dimple.js中正確地進行聚合抑制？下面的代碼不應該加上05/2013的利潤，至少這是我想實現的。如何在dimple.js中使用series.stack = false來抑制聚合;每個系列的不同符號

我試圖使用s3 = chart.addSeries("Profit in each unit", dimple.plot.bubble, [x,y3]);中的「利潤」而不是「每個單元中的利潤」，然後沒有聚合，但氣泡在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();

來源

2015-05-11 Ferenc

你是接近的答案，你需要指定addSeries的第一個參數的利潤，但該參數可以採取一個陣列，只有數組的最後一個元素定義色彩，讓你可以包括你的標籤有：

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

堆疊屬性是關於定位的元素，而不是數據集合，所以不會幫你在這裏。

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

來源

2015-05-12 16:43:37

如何在dimple.js中使用series.stack = false來抑制聚合;每個系列的不同符號

回答

相關問題