javascript - 如何使用dimple.js按不同数据行对y轴进行排序

Question

这是 this topic 的后续内容。我正在尝试按不同的数据行动态对 y 轴进行排序。我的数据结构:

var dataGraph = [];
for (var i = 0; i < data.length; i++) {
  //data[i].eusiInd = (data[i].eusiInd === 99) ? '' : data[i].eusiInd;
  dataGraph.push(
    {'Index' : 'Eusi-Index', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].eusiInd, 'Identifier' : 'Eusi-Index, '+data[i].disagg},
    {'Index' : 'Standard of Living', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].stdLiving, 'Identifier' : 'Standard of Living, '+data[i].disagg},
    {'Index' : 'Housing', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].housing, 'Identifier' : 'Housing, '+data[i].disagg},
    {'Index' : 'Health', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].health, 'Identifier' : 'Health, '+data[i].disagg},
    {'Index' : 'Social Relations', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].socRel, 'Identifier' : 'Social Relations, '+data[i].disagg},
    {'Index' : 'Work', 'Country' : data[i].ctry, 'Year' : data[i].year, 'Disaggregation' : data[i].disagg, 'Index Value' : data[i].work, 'Identifier' : 'Work, '+data[i].disagg}
  );
}
// Remove missing values
dataGraph = dataGraph.filter(function (element) {
 return (Math.floor(element['Index Value']) !== 99);
});

// Data for one year
var dataGraphFiltered = dimple.filterData(dataGraph, 'Year', '2010');

我创建了一个混合条形图/气泡图/折线图，并希望能够动态对 y 轴进行排序。我的代码如下所示:

var barData = [],
    lineData = [],
    keyIndex = "Eusi-Index";

for (var i = 0; i < dataGraphFiltered.length; i++) {
    if (dataGraphFiltered[i]['Index'] === keyIndex) {
        barData.push(dataGraphFiltered[i]);
    } else {
        lineData.push(dataGraphFiltered[i]);
    }
}

var svg = dimple.newSvg("#graphic", 550, 700);

var chart = new dimple.chart(svg),
    bars,
    lines,
    dots;

chart.setBounds(50, 30, 480, 630);

var xAxis = chart.addMeasureAxis('x', 'Index Value');
xAxis.overrideMax = 1;
var yAxis = chart.addCategoryAxis('y', 'Country');

bars = chart.addSeries('Identifier', dimple.plot.bar);
bars.data = barData;
bars.getTooltipText = function (e) {
  return [
  'Country: '+e['cy'],
  e['aggField'][0],
  'Index Value: '+Math.round10(e['xValue'],-3)
  ];
};
chart.assignColor('Eusi-Index, total', '#D3D3D3', '#D3D3D3');

lines = chart.addSeries('Identifier', dimple.plot.line);
lines.data = lineData;

dots = chart.addSeries('Identifier', dimple.plot.bubble);
dots.data = lineData;
dots.getTooltipText = function (e) {
  return [
  'Country: '+e['cy'],
  e['aggField'][0],
  'Index Value: '+Math.round10(e['xValue'],-3)
  ];
};

yAxis.addOrderRule('Index Value', false);

chart.draw();

我可能需要使用带有“addOrderRule”的排序函数，以便能够按图表中显示的每个“标识符”数据行进行排序，但我不知道如何实现这一点。我将非常感谢您的建议。

Answer 1

我可以使用以下方法自己解决排序问题:

yAxis.addOrderRule(function(a,b){
  var avalue, bvalue;
  for (var i=0; i<a['Identifier'].length; i++) {
    avalue = 0;
    if (a['Identifier'][i] === 'Housing, total') {
      avalue = a['Index Value'][i*2];
      break;
    }
  }
  for (var i=0; i<b['Identifier'].length; i++) {
    bvalue = 0;
    if (b['Identifier'][i] === 'Housing, total') {
      bvalue = b['Index Value'][i*2];
      break;
    }
  }
  return avalue-bvalue;
}, false);

通过更改“住房，总计”，我可以决定按哪个标识符对 y 轴进行排序