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中 - 小提琴由于某种原因不会呈现。

有什么想法吗？

修改

感谢John，我现在还有另一个问题 - 我试图在条形图上添加标签，并且我已经使用了酒窝网站上的示例。但是我不得不对它进行一些修改，因为它并没有真正起作用：

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

这是一个好方法吗？

Answer 1

首先我注意到你正在使用现在已经过时的凹坑版本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/

订购堆积条形图中的列 - 酒窝

1 个答案: