如何更改类别之间的宽度/填充？

Question

我正在创建一个 3D 圆柱分组图。如何在类别之间放置一些空间？紫色圆柱似乎被堵住了，因为它实在是太近了。我尝试过点填充、xAxis 填充。似乎没有任何效果。而且我不想使用组填充，因为它会使圆柱体更小。我需要它有那么大。

      let categories = [];
      let result = { };
      for(let i=0;i<$scope.charData.length;i++) {
        categories.push($scope.charData[i].PERIODE);
        for(let prop in $scope.charData[i]) {
          if(prop ==  `PERIODE`) continue;
          if(result[prop] == null) { result[prop] = []; }
          result[prop].push(parseFloat($scope.charData[i][prop]));
        }
      }
      let resultView = [];
      let deep = 0;
      for(let prop in result) {
        resultView.push({
          name: prop,
          data: result[prop],
          depth: deep,
        });
        deep += 75;
      }

      Highcharts.chart('chartdiv', {
        chart: {
          type: 'cylinder',
          options3d: {
            enabled: true,
            alpha: 25,
            beta: 5,
            viewDistance: 0,
            depth: 100
          },
          scrollablePlotArea: {
            minWidth: ($scope.device) ? 1200 : 0,
            opacity: 0.85,
          },
          spacingLeft: 0,
          marginLeft: ($scope.device) ? -120 : -50,
          marginRight: ($scope.device) ? -120 : -50,
        },

        title: {
          text: 'Sales Simex ' + ($scope.year - 1) + ' - ' + $scope.year
        },

        xAxis: {
          categories: categories,
          min: 0,
          labels: {
            skew3d: true,
            style: {
              fontSize: '16px'
            },
          },
        },

        yAxis: {
          allowDecimals: false,
          min: 0,
          title: {
            text: 'Amount',
            skew3d: true
          },
        },

        tooltip: {
          headerFormat: '<b>{point.key}</b><br>',
          pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
          column: {
            stacking: 'normal',
            depth: 100,
          },
          cylinder: {
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0
          }
        },
        series: resultView,
      });

Answer 1

要在类别之间留出更多空间，您可以减少 beta 参数、增加 groupPadding 或增加图表宽度。请注意，groupPadding 会使圆柱体更小，因为它们之间的空间更大，因此您必须做出决定。

演示：

Highcharts.chart('container', {
  chart: {
    type: 'cylinder',
    options3d: {
      enabled: true,
      alpha: 25,
      beta: 10,
      viewDistance: 0,
      depth: 100
    }
  },
  title: {
    text: 'Highcharts Cylinder Chart'
  },
  xAxis: {
    min: 0,
    labels: {
      skew3d: true,
      style: {
        fontSize: '16px'
      },
    },
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Amount',
      skew3d: true
    },
  },
  plotOptions: {
    series: {
      depth: 25,
      colorByPoint: true
    },
    column: {
      stacking: 'normal',
      depth: 100,
    },
    cylinder: {
      groupPadding: 0.3,
      pointPadding: 0.15,
      borderWidth: 0
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 10,
    name: 'Cylinders1',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 40,
    name: 'Cylinders2',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 70,
    name: 'Cylinders2',
    showInLegend: false
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    depth: 100,
    name: 'Cylinders2',
    showInLegend: false
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>