在每个间隔中具有递减顺序的 Highcharts

Question

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

Answer 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;
    });
  }
}

现场演示： https://jsfiddle.net/BlackLabel/tnrch8v1/

API参考：

https://api.highcharts.com/highcharts/chart.events.render

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

Answer 2

@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;
          });
        }
      },
    }

所以我改变了：

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

至：

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

在每个间隔中具有递减顺序的 Highcharts

Highcharts with decrease order in each interval

highcharts

vue.js