Vue.js 在每个区间具有递减顺序的高位图表

是否可以使用Highcharts创建按每个时间间隔排序的图表？ 对于expample，在这张1月份的图片中，数据将依次为：纽约、东京、伦敦、柏林。每个月相同-数据应按降价顺序显示

---

Highcharts没有内置的功能来实现这一点，但例如，您可以使用

render

事件，通过按需要更改列的位置来组织列

events: {
  render: function() {
    var series = this.series,
      longestSeries = series[0],
      sortedPoints = [],
      selectedPoints = [];

    // find a series with the highest amount of points
    series.forEach(function(s) {
      if (s.points.length > longestSeries.points.length) {
        longestSeries = s;
      }
    });
            
    longestSeries.points.forEach(function(point) {
      series.forEach(function(s) {
        selectedPoints.push(s.points[point.index]);
      });

      sortedPoints = selectedPoints.slice().sort(function(a, b) {
        return b.y - a.y;
      });

      selectedPoints.forEach(function(selectedPoint) {
        if (
          selectedPoints.indexOf(selectedPoint) !==
          sortedPoints.indexOf(selectedPoint) &&
          selectedPoint.graphic
        ) {
          // change column position
          selectedPoint.graphic.attr({
            x: sortedPoints[selectedPoints.indexOf(selectedPoint)].shapeArgs.x
          });
        }
      });

      sortedPoints.length = 0;
      selectedPoints.length = 0;
    });
  }
}

---

现场演示：

API参考：

---

@ppotaczek非常感谢您的帮助！我解决了我的问题，但我必须对您的代码进行一些更改：

events: {
        render: function() {
         if (this.series.length === 0) return
          var series = this.series,
            longestSeries = series[0],
            sortedPoints = [],
            selectedPoints = [];

          // find a series with the highest amount of points
          series.forEach(function(s) {
            if (s.points.length > longestSeries.points.length) {
              longestSeries = s;
            }
          });
          
          longestSeries.points.forEach(function(point) {
            series.forEach(function(s) {
              selectedPoints.push(s.points[point.index]);
            });

            sortedPoints = selectedPoints.slice().sort(function(a, b) {
              return b.y - a.y;
            });

            selectedPoints.forEach(function(selectedPoint) {

                if (
                  selectedPoints.indexOf(selectedPoint) !==
                  sortedPoints.indexOf(selectedPoint) &&
                  selectedPoint.graphic
                ) {
                  // change column position
                    selectedPoint.graphic.attr({
                    x:  selectedPoints[sortedPoints.indexOf(selectedPoint)].shapeArgs.x
                  });
                }
            });

            sortedPoints.length = 0;
            selectedPoints.length = 0;
          });
        }
      },
    }

所以我改变了：

//更改列位置
selectedPoint.graphic.attr({
x:sortedPoints[selectedPoints.indexOf（selectedPoint）].shapeArgs.x
});