Javascript Highcharts-柱的中心位置

Javascript Highcharts-柱的中心位置,javascript,highcharts,Javascript,Highcharts,我有一个Highcharts柱形图,我试图减少X轴上每一列之间的距离,同时将它们拉向中心,使这些列看起来更分组 例如,在我上面的例子中,红色和蓝色的柱会更靠近,并且朝向中心 下面是我的图表配置。seriesData参数只是我在渲染时传入的自定义对象 chartConfig.js function chartConfig(seriesData) { return { barColor: seriesData.color, data: seriesData, credi

我有一个Highcharts柱形图,我试图减少X轴上每一列之间的距离,同时将它们拉向中心,使这些列看起来更分组

例如,在我上面的例子中,红色和蓝色的柱会更靠近,并且朝向中心

下面是我的图表配置。seriesData参数只是我在渲染时传入的自定义对象

chartConfig.js

function chartConfig(seriesData) {
  return {
    barColor: seriesData.color,
    data: seriesData,
    credits: { enabled: false },
    chart: {
      width: seriesData.width,
      defaultSeriesType: 'column',
      backgroundColor: '#EAEFF6'
    },
    tooltip: { enabled: false },
    colorAxis: {
      dataClassColor: 'category'
    },
    colors: [],
    legend: {},
    title: {
      useHTML: true,
      text: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '_' : seriesData.name,
      style: {
        color: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '#E9EFF4' : '#666666',
        fontSize: '14px',
        fontFamily: 'Roboto',
        fontWeight: 'bold',
        paddingTop: '10px',
        lineHeight: '1em'
      },
      align: 'center',
      x: 0,
      y: 2
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        animation: true,
        borderColor: 'grey',
        borderWidth: 0
      },
      series: {
        borderRadius: 15,
        dataLabels: {
          enabled: false
        },
        states: {
          hover: {
            enabled: false
          }
        }
      }
    },
    yAxis: [{
      max: Math.max.apply(null, seriesData.scaleValues),
      min: Math.min.apply(null, seriesData.scaleValues),
      title: false,
      minorGridLineColor: '#FFF',
      gridLineColor: '#8E8E8E',
      minPadding: 0,
      tickPositions: (seriesData.scalePercentageValues || null),
      labels: {
        formatter: function () {
          if (seriesData.usePercentage) {
            return `${this.value} %`;
          }
          return this.value;
        }
      }
    }],
    xAxis: {
      lineWidth: 0,
      minorGridLineWidth: 0,
      lineColor: 'transparent',
      minorTickLength: 0,
      tickLength: 0,
      categories: seriesData.elements.map((x) => { return x.name; }),
      labels: {
        style: {
          color: '#666666',
          fontSize: '12px',
          fontFamily: 'Roboto'
        }
      }
    },
    series: [{
      dataLabels: {
        style: {
          fontSize: '12px',
          fontWeight: 'normal',
          textShadow: 'none',
          color: 'black',
          fontFamily: 'Roboto',
          backgroundColor: 'blue'
        },
        enabled: true,
        formatter: function () {
          if (seriesData.usePercentage) {
            return `${this.y}%`;
          }
          return this.y;
        }
      },
      showInLegend: false,
      name: 'Fill Series',
      color: '#F2F6F9',
      pointWidth: 28,
      animation: true,
      data: seriesData.elements.map((x) => {
        return { name: x.name, y: x.value, color: x.color };
      }),
      borderRadiusTopLeft: 10,
      borderRadiusTopRight: 10,
      borderColor: '#C0C0C0',
      borderWidth: '1'
    }]
  };
}

module.exports = chartConfig;
到目前为止,我尝试的唯一解决方案是使用pointPadding和groupPadding。但是,这似乎没有达到预期效果。

您可以设置参数和自适应,也可以设置参数和自适应,以及