Question

enter image description here

我有一个带有ecode的凹坑图

var svg = dimple.newSvg("#chartContainer", 800, 600);

var myChart = new dimple.chart(svg, data);
myChart.setBounds(120, 30, 750, 550);
var x = myChart.addCategoryAxis("x", "time");
x.showGridlines = true;
x.addOrderRule("time");

var y = myChart.addMeasureAxis("y", "height", null);
//.overrideMax=(max);
y.overrideMin = 0;
y.overrideMax = 1000;
y.tickFormat = "d";

var s = myChart.addSeries("row", dimple.plot.line);
s.lineWeight = 1;
s.lineMarkers = true;
s.addOrderRule(function(n){
    console.log('n:', n);
    return n.row;
});


myChart.addLegend(0, 0, 900, 100, "left", s);
myChart.draw();

并且传说顺序很不稳定。

数据的格式为

[
   },
{
    "row": "1",
    "height": -1,
    "time": 607
},
{
    "row": "1",
    "height": -11,
    "time": 709
},
{
    "row": "1",
    "height": -22,
    "time": 809
},
{
    "row": "1",
    "height": -32,
    "time": 910
},
{
    "row": "1",
    "height": -42,
    "time": 1011
},
{
    "row": "1",
    "height": -52,
    "time": 1113...

]。

我希望行系列在图例中按顺序排列。

感谢。

Answer 1

覆盖_getEntries方法的另一种可能不那么脆弱的方法是利用function.apply（）

来利用原始方法

// first, store a copy of the original _getEntries method.
legend._getEntries_old = legend._getEntries;

// now override the method
legend._getEntries = function()
{
    // but call the original version,
    // then sort the returned array before returning it.
    return legend._getEntries_old.apply(this, arguments).reverse();
}

顺便说一下：谢谢，戴夫，你的原始答案 - 区域图表中的图例与区域形状的堆叠顺序相反，让我发疯了。

Answer 2

我以为我把传说命令放在酒窝里，但事实证明我没有，哎呀！我担心这里唯一的选择是覆盖你的图例上的_getEntries方法。该方法应该是凹坑的内部，但它仅用于图例绘制。您可以像这样覆盖它：

myLegend._getEntries = function () {
    var entries = [];
    if (this.series) {
        this.series.forEach(function (series) {
            var data = series._positionData;
            data.forEach(function (row) {
                var index = -1,
                    j,
                    field = ((series.plot.grouped && !series.x._hasCategories() && !series.y._hasCategories() && row.aggField.length < 2 ? "All" : row.aggField.slice(-1)[0]));
                for (j = 0; j < entries.length; j += 1) {
                    if (entries[j].key === field) {
                        index = j;
                        break;
                    }
                }
                if (index === -1 && series.chart._assignedColors[field]) {
                    entries.push({
                        key: field,
                        fill: series.chart._assignedColors[field].fill,
                        stroke: series.chart._assignedColors[field].stroke,
                        opacity: series.chart._assignedColors[field].opacity,
                        series: series,
                        aggField: row.aggField
                    });
                    index = entries.length - 1;
                }
            });
        }, this);
    }

    // PUT YOUR SORTING LOGIC HERE
    // For example to sort numeric values ascending
    entries.sort(function (a, b) { return parseFloat(a.key) - parseFloat(b.key); });

    return entries;
};

以上是一个例子：http://jsbin.com/dezaq/1/edit?js,output

以上是我的解决方案：http://jsbin.com/dezaq/2/edit?js,output

如果您想要一个更易于阅读但又特定于您的图表实例的修补程序，则可以对响应进行硬编码：

myLegend._getEntries = function () {
    var orderedValues = ["1", "2", "3"];
    var entries = [];
    orderedValues.forEach(function (v) {
        entries.push(
        {
                key: v,
                fill: myChart.getColor(v).fill,
                stroke: myChart.getColor(v).stroke,
                opacity: myChart.getColor(v).opacity,
                series: s,
                aggField: [v]
            }
        );
    }, this);

    return entries;
};

以下是行动中的一个：http://jsbin.com/dezaq/4/edit?js,output

在Dimple中你如何改变传奇系列的顺序？

2 个答案: