0

我知道我可以使用以下代码的depth属性中的column属性设置 Highcharts 中所有条形的深度：plotOptions

plotOptions: {
    column : {
        depth: 30 
    }
}

或者

# in R
hc_plotOptions(column = list(
  depth = 30
)

问题是如何为条形图中的每个条形组设置不同的深度（不是一个深度）？解决方案可以在 R (Highcharter) 中还是在 JS 中？

4

1 回答 1

2

在核心代码中，depth属性总是取自系列对象选项。每个组由具有相同 x 值的点组成。

我想到了这两个解决方案：

1. 修改核心代码，使depth值取自点的配置：

(function(H) {
  (...)

  H.seriesTypes.column.prototype.translate3dShapes = function() {
      (...)    

        point.shapeType = 'cuboid';
        shapeArgs.z = z;
        shapeArgs.depth = point.options.depth; // changed from: shapeArgs.depth = depth;
        shapeArgs.insidePlotArea = true;

      (...) 
  };

})(Highcharts);

系列选项：

  series: [{
    data: [{y: 5, depth: 50}, {y: 2, depth: 100}]
  }, {
    data: [{y: 13, depth: 50}, {y: 1, depth: 100}]
  }]

现场演示：http: //jsfiddle.net/kkulig/3pkon2Lp/

关于覆盖核心功能的文档页面： https ://www.highcharts.com/docs/extending-highcharts/extending-highcharts

2. 为每个点创建一个单独的系列。

depth属性可以应用于系列，因此不需要修改核心。默认情况下，每个系列都显示在图例中，因此必须使用linkedTo属性正确连接系列（这样用户不会看到与点一样多的系列）。

可以在将点传递给图表构造函数之前修改点或在chart.events.load.

现场演示：http: //jsfiddle.net/kkulig/37sot3am/

  load: function() {
    var chart = this,
      newSeries = [],
      merge = Highcharts.merge,
      depths = [10, 100]; // depth values for subsequent x values

    for (var i = chart.series.length - 1; i >= 0; i--) {
      var s = chart.series[i];

      s.data.forEach(function(p, i) {

        // merge point options
        var pointOptions = [merge(p.options, {
          // x value doesn't have to appear in options so it needs to be added manually
          x: p.x
        })];

        // merge series options
        var options = merge(s.options, {
          data: pointOptions,
          depth: depths[i]
        });

        // mimic original series structure in the legend
        if (i) {
          options.linkedTo = ":previous"
        }

        newSeries.push(options);
      });
      s.remove(true);
    }

    newSeries.forEach((s) => chart.addSeries(s));
  }

API参考：

https://api.highcharts.com/highcharts/plotOptions.series.linkedTo

于 2017-12-27T19:06:39.830 回答