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

Question

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

plotOptions: {
    column : {
        depth: 30 
    }
}

或者

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

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

Answer 1

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

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

<强>1。修改核心代码，以便从点的配置中获取深度值:

(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。为每个点创建一个单独的系列。

深度属性可以应用于系列，因此无需修改核心。默认情况下，每个系列都显示在图例中，因此必须使用 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