如何使用酒窝.js在条形图中添加"extra stack"？

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