Highcharts：在最上方放置價值最低的意甲系列

有沒有辦法將底價值最高的系列和最上面的價值最低的系列放在一起，因此它不會破壞圖表？Highcharts：在最上方放置價值最低的意甲系列

Highcharts.chart('container', { 
 
    chart: { 
 
    type: 'area' 
 
    }, 
 
    xAxis: { 
 
    tickmarkPlacement: 'on', 
 
    type: 'datetime', 
 
    title: { 
 
     enabled: false 
 
    }, 
 
    }, 
 
    plotOptions: { 
 
    area: { 
 
     stacking: 'normal', 
 
     lineColor: '#666666', 
 
     lineWidth: 1, 
 
     marker: { 
 
     lineWidth: 1, 
 
     lineColor: '#666666' 
 
     } 
 
    } 
 
    }, 
 
    series: [{ 
 
    name: 'Approved', 
 
    color: 'green', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 06), 
 
     y: 21 
 
    }, { 
 
     x: Date.UTC(2017, 09, 07), 
 
     y: 21 
 
    }, { 
 
     x: Date.UTC(2017, 09, 08), 
 
     y: 21 
 
    }, { 
 
     x: Date.UTC(2017, 09, 09), 
 
     y: 21 
 
    }, { 
 
     x: Date.UTC(2017, 09, 10), 
 
     y: 21 
 
    }, { 
 
     x: Date.UTC(2017, 09, 11), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 12), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 13), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 14), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 18), 
 
     y: 19 
 
    }, { 
 
     x: Date.UTC(2017, 09, 19), 
 
     y: 21 
 
    }, ] 
 
    }, { 
 
    name: 'Proposal', 
 
    color: 'yellow', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 11), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 12), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 13), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 14), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 2 
 
    }, { 
 
     x: Date.UTC(2017, 09, 18), 
 
     y: 2 
 
    }, ] 
 
    }, { 
 
    name: 'Rejected', 
 
    color: 'grey', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 06), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 07), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 08), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 09), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 10), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 11), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 12), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 13), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 14), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 18), 
 
     y: 1 
 
    }, { 
 
     x: Date.UTC(2017, 09, 19), 
 
     y: 1 
 
    }] 
 
    }] 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

的jsfiddle：http://jsfiddle.net/atc4sxzL/2/

請注意，該系列通過瓶動態生成的Python編寫的。

來源

2017-10-19 Uthman

它看起來像你的問題已經在這裏找到答案：https://stackoverflow.com/questions/17997717/highcharts-change-legend-index-order – Calaris

@Calaris - 問題是我沒有定義系列的順序。我雖然有一張爲highcharts檢查系列並根據其長度對它們進行排序 – Uthman

系列不是一個單詞，系列既是單數也是複數 – Novaterata

我做了一些工作，並做你在問什麼。我增加了以下內容chart.events.load：

var orderingArray = [] 
let series = this.series; 
for (var i = 0; i < series.length; i++) { 
    orderingArray.push({ 
    index: i, 
    arrLen: series[i].yData.length 
    }) 
} 
orderingArray = orderingArray.sort(function(a, b) { 
    return a.arrLen - b.arrLen; 
}); 
for (var i = 0; i < orderingArray.length; i++) { 
    series[orderingArray[i]['index']].update({ 
    index: i + 1 
    }); 
}

的不是了不起這是我打電話update因爲有系列相同量的時間。所以在這種情況下，圖表重繪了3次，這是不必要的。但我沒有找到另一種方式來做到這一點，嘗試setOptions()手動呼叫redraw()，但它沒有奏效。只是FYI。

工作示例這裏：http://jsfiddle.net/ewolden/atc4sxzL/4/

上chart.events.load API：https://api.highcharts.com/highcharts/chart.events.load

來源

2017-10-20 09:09:55 ewolden

Tihs正是我一直在尋找的！我也會用深入測試來告訴你它是怎麼回事:) – Uthman

Highcharts：在最上方放置價值最低的意甲系列

回答

相關問題