Different Depth In 3D BarChart in Highcharts

问题

I know that I can set depth of all bars in Highcharts using depth property in column property of plotOptions likes the following code:

plotOptions: {
    column : {
        depth: 30 
    }
}

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

The questions is how can I set different depth for each bar group in a bar chart (not one depth for all)? Solution can be in R (Highcharter) or in JS?

回答1:

In core code the depth property is always taken from the series object options. Every group consists of the points with the same x values.

These 2 solutions came to my mind:

1. Modify the core code so that depth values are taken from points' configuration instead:

(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 options:

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

Live demo: http://jsfiddle.net/kkulig/3pkon2Lp/

Docs page about overwriting core functions: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

2. Create a separate series for every point.

depth property can be applied to a series so the modification of the core wouldn't be necessary. Every series is shown in legend by default so series will have to be properly connected using linkedTo property (so that the user doesn't see as many series as points).

Points can be modified before passing them to the chart constructor or dynamically handled in chart.events.load.

Live demo: 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 reference:

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

来源：https://stackoverflow.com/questions/47983857/different-depth-in-3d-barchart-in-highcharts

标签

javascript

plot

Highcharts

r-highcharter