Highcharts 中 3D 条形图的不同深度

Question

我知道我可以使用 depth 属性 in column 属性 of plotOptions 设置 Highcharts 中所有柱的深度喜欢下面的代码：

plotOptions: {
    column : {
        depth: 30 
    }
}

或

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

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

Answer 1

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

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

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

Highcharts 中 3D 条形图的不同深度

Different Depth In 3D BarChart in Highcharts

javascript

plot

r

highcharts

r-highcharter