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

Question

我使用 dimple.js

绘制了条形图

http://jsfiddle.net/keshav_1007/Lkvm27o4/1/ - 这里是 fiddle

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，这意味着在这些情况下将应用默认排序。

这可以通过对 return 比较器使用一个函数来动态化：

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

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

How to add an "extra stack" in Bar graph using dimple.js?

javascript

dimple.js