如何使用dimple.js在条形图中添加“额外堆栈”？

Question

我有一个绘制使用dimple.js

http://jsfiddle.net/keshav_1007/Lkvm27o4/1/条形图 - 这里是小提琴

var yMax = 520; // overriding y axis 
var popup; 
var score=8000/100; 
var svg = dimple.newSvg("#chartContainer", 300, 400); 
var data = [{ 
    "Brand":"A", 
    "Day":"Mon", 
    "SalesVolume":10 }, 
    { 
    "Brand":"B", 
    "Day":"Mon", 
    "SalesVolume":20 }, 
    { 
    "Brand":"C", 
    "Day":"Mon", 
    "SalesVolume":20 }, 
    { 
    "Brand":"D", 
    "Day":"Mon", 
    "SalesVolume":20 }, 
    { 
    "Brand":"E", 
    "Day":"Mon", 
    "SalesVolume":20 }, 
    { 
    "Brand":"F", 
    "Day":"Mon", 
    "SalesVolume":50 }]; 
var myChart = new dimple.chart(svg, data); 

myChart.setBounds(100, 10, 250, 250) 
var x = myChart.addCategoryAxis("x", "Day"); 
var y = myChart.addMeasureAxis("y", "SalesVolume"); 
y.overrideMax = yMax; 
var s = myChart.addSeries("Brand", dimple.plot.bar); 
s.barGap=0.8; 
var lgnd = myChart.addLegend(80, 300, 300, 30, "left"); 

myChart.draw(); 

在该柱状图我需要把最后一个堆是[{"Brand":"F","Day":"Mon","SalesVolume":50 }]总是对的顶部而不改变其他堆栈的默认顺序。 如何做到这一点？

Answer 1

您可以添加顺序规则，该系列是这样的：

s.addOrderRule(function (a, b) { 
    var result = 0; 
    if (a["Brand"] === "F" && b["Brand"] !== "F") { 
     result = 1; 
    } else if (a["Brand"] !== "F" && b["Brand"] === "F") { 
     result = -1; 
    } 
    return result; 
}); 

中，品牌是“F”最后这将会把任何东西，评价为0等元素意味着默认的排序将被应用这些情况。

function getComparer (dimension, lastValue) { 
    return function (a, b) { 
     var result = 0; 
     if (a[dimension] === lastValue && b[dimension] !== lastValue) { 
      result = 1; 
     } else if (a[dimension] !== lastValue && b[dimension] === lastValue) { 
      result = -1; 
     } 
     return result; 
    }; 
} 

然后，你可以把它叫做：

这可以通过使用一个函数返回的比较器进行动态

s.addOrderRule(getComparer("Brand", "F"));