三维BarChart在Highcharts中的不同深度 [英] Different Depth In 3D BarChart in Highcharts

问题描述

我知道我可以使用深度属性设置Highcharts中所有酒吧的深度，列属性 plotOptions 喜欢以下代码：

  plotOptions：{
列： {
 depth：30 
} 
} 
  

（

 ＃in R 
 hc_plotOptions（column = list（
 depth = 30 
）
  

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

解决方案

$ b $这两种解决方案出现在我的脑海里：

1.修改核心代码，使深度值取自点的配置ins tead：

 （function（H）{
（...）
 
 H .seriesTypes.column.prototype.translate3dShapes = function（）{
（...）
 
 point.shapeType ='cuboid'; 
 shapeArgs.z = z; 
 shapeArgs.depth = point.options.depth; //改为：shapeArgs.depth = depth; 
 shapeArgs.insidePlotArea = true; 
 
（...）
}; 
 
}）（Highcharts）; 
  

系列选项：

 系列：[{
 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 属性正确连接（以便用户不会看到与点数一样多的系列） p>

可以在将点传递给图表构造函数之前修改点或在 chart.events.load 中动态处理点。

现场演示： http：/ /jsfiddle.net/kkulig/37sot3am/

  load：function（）{
 var chart = this，
 newSeries = []，
 merge = Highcharts.merge，
 depths = [10，100]; //后续x值的深度值
 
 for（var i = chart.series.length  -  1; i> = 0; i--）{
 var s = chart.series [一世]; 
 $ b $ s.data.forEach（function（p，i）{
 
 //合并点选项
 var pointOptions = [merge（p.options，{
 // x值不必出现在选项中，因此需要手动添加
x：px 
}）]; 
 
 //合并系列选项
 var options = merge（s.options，{
 data：pointOptions，
 depth：depths [i] 
}）; 
 
 //模仿原始如果（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

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 
    }
}

Or

# 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?

解决方案

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

这篇关于三维BarChart在Highcharts中的不同深度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！