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

【问题标题】：Different Depth In 3D BarChart in HighchartsHighcharts中3D条形图的不同深度
【发布时间】：2018-06-07 14:34:39
【问题描述】：

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

plotOptions: {
    column : {
        depth: 30 
    }
}

或者

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

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

【问题讨论】：

标签： javascript r plot highcharts r-highcharter

【解决方案1】：

在核心代码中，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

【讨论】：

当然，我刚刚在我的答案中添加了演示。