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

Question

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

即使 x 轴顺序已关闭，我也不得不在我的数据中添加一个名为 'Order' 的行，以确保图表的 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);

我正在使用它来呈现具有不同数据集的同一图表的多个实例，但条形图未按准确顺序对齐。我希望 'Females'（蓝色）排在第一位，然后是每个组中的 'Male'（红色）列。

这里有两个具有不同数据集的实例，看看对齐是如何随机化的。好像一点都不守规矩

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

不确定如何控制它，到目前为止我已经尝试添加像

这样的订单规则

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 轴的所有组箱顺序正确到确保 'Female' 条出现在 'Mens' 之前准确和精确地执行顺序.

Answer 1

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

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

Dimple Barplot Unable to Align or Order Bars Effectively using Grouping or Order Rules

javascript

dimple.js