在堆积条形图中排序列 - 酒窝

Question

我正在尝试对使用 DimpleJS 生成的堆积条形图进行排序。

我试过这样的：

    var svg = dimple.newSvg('#graphicview', "100%", "100%");

    var data1 = [
      { Tasks: 10, Date: "Jan", MyValue: "Val 1", Order: 1 },
      { Tasks: 15, Date: "Jan", MyValue: "Val 2", Order: 2 },
      { Tasks: 15, Date: "Jan", MyValue: "Val 3", Order: 3 },
      { Tasks: 50, Date: "Feb", MyValue: "Val 1", Order: 1 },
      { Tasks: 115, Date: "Feb", MyValue: "Val 2", Order: 2 },
      { Tasks: 0, Date: "Mar", MyValue: "Val 1", Order: 1 },
      { Tasks: 0, Date: "Apr", MyValue: "Val 1", Order: 1 }
    ];

    var myChart = new dimple.chart(svg, data1);

    var x = myChart.addCategoryAxis("x", "Date");
    x.addOrderRule(['Jan', 'Feb', 'Mar', 'Apr']);
    var y = myChart.addMeasureAxis("y", "Tasks");
    y.addOrderRule(function (left, right) {
        debugger;
        if (left.Order === right.Order)
            return 0;
        if (left.Order > right.Order)
            return 1;
        return -1;
    });
    y.showPercent = false;
    y.hidden = true;

    var s = myChart.addSeries("MyValue", dimple.plot.bar);
    myChart.assignColor('Val 1', '#aa0123');
    myChart.draw();

http://jsfiddle.net/sirrocco/mkzTk/1/

在第二列，顺序应该是相反的。排序代码根本没有被调用——从代码来看似乎是因为轴类型——但我不确定使用哪个轴来获得相同的结果。

此外，在 Firefox 中，小提琴由于某种原因无法呈现。

有什么想法吗？

编辑

谢谢约翰，我现在确实有另一个问题 - 我正在尝试在栏上添加标签，并且我使用了酒窝网站上的示例。但是我不得不对其进行一些修改，因为它并没有真正起作用：

http://jsfiddle.net/sirrocco/mkzTk/4/

这是一个好方法吗？

Answer 1

首先，我注意到您使用的dimple 版本1 现在已经过时了，我建议您参考最新的(http://dimplejs.org/dist/dimple.v2.1.0.min.js)，我不认为有语义更改会破坏您的任何代码。这将解决 Firefox 问题。

关于订购问题（与版本无关）。您不能对度量轴进行排序，在这种情况下，您需要将排序规则应用于系列：

// In order to deal with cases where order differs by column 
// you need to include it in your series definition
var s = myChart.addSeries(["Order", "MyValue"], dimple.plot.bar);

// Your function approach would also work, but as it is the default 
// handling for a numeric column you can just specify order like this
s.addOrderRule("Order");

它正在工作：

http://jsfiddle.net/mkzTk/2/