Question

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

plotOptions: {
    column : {
        depth: 30 
    }
}

或者

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

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

Answer 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

Highcharts中的3D BarChart中的不同深度

1 个答案: