javascript - Dimple Barplot 无法使用分组或排序规则有效地对齐或排序条形图

Question

我在使用 Dimple.JS 时遇到问题，他们的分组/顺序规则方法不允许我按照我的意愿控制条形列的顺序或对齐方式。

即使 x 轴顺序已关闭，我也必须在数据中添加名为“顺序”的行，以确保图表的 x 轴按照组箱的升序正确呈现(“0-10”) ' 到 '90-100')。

我的数据存储方式如下:

var data = [];
var obj = {
          'Group Bins': '0-10',
          'Gender': 'Male',
          'Rate': 20%,
          'Order': 1
    };

data.push(obj);

然后这是我必须渲染条形图的代码:

  var svg = dimple.newSvg("#container", 1200, 400);
  var myChart = new dimple.chart(svg, bardata);
  myChart.setBounds(60, 20, 950, 300)
  myChart.fontFamily = 'Courier';
  myChart.assignColor('Male', "#0175AE", 'darkslategrey', 0.7);
  myChart.assignColor("Female", "#E8603C", "crimson", 0.7);
  var x_bar = myChart.addCategoryAxis("x", ['Group Bins', 'Gender'], false);
  x_bar.addOrderRule('Order', false); //Exactly renders Group Bins in Order
  var y_bar = myChart.addMeasureAxis("y", "Rate");
  y_bar.tickFormat = "%"
  var bar_series = myChart.addSeries("Gender", dimple.plot.bar);
  bar_series.addOrderRule('Gender', true); //Exactly Renders Legend in Order
  myChart.addLegend(500, 2, 510, 20, "right");
  myChart.ease = "bounce";
  myChart.draw(1000); 

我使用它来渲染具有不同数据集的同一图表的多个实例，但条形图未按确切的顺序对齐。我希望每组中的“女性”(蓝色)列首先出现，然后是“男性”(红色)列。

这里有两个具有不同数据集的实例，看看对齐是如何随机化的。看起来根本不遵守规则。

看看怎么没有逻辑顺序吧？他们只是切换...

不确定如何控制它，到目前为止我已经尝试添加订单规则，例如

x_bar.addOrderRule('Reviewer Group', false); //Doesn't Work and now Order is Wrong
x_bar.addOrderRule(['Order','Gender'], false); //Doesn't Work and now Order is Wrong
x_bar.addOrderRule(['Order','Female', 'Male'], false); //Doesn't Work and now Order is Wrong

//passing a function


var ordering = function(x,y){
    console.log(x);
    console.log(y);
};

x_bar.addOrderRule(ordering, false);

// Obj looks like:
// {'Group Bins': '0-10', Gender: [ 'Male', 'Female'], Rate:[0.14, 0.14, 0.30, 0.30], Order: [1, 1]}

不知道如何准确无误地实现顺序，从确保 x 轴上所有组箱的顺序正确，到确保“女性”栏出现在“男性”栏之前。

Answer 1

您应该可以使用 x_bar.addGroupOrderRule('Gender');

来完成此操作