修复了 Highcharts 中条形之间的填充

Question

我们有一个关于 Highcharts 中条形之间的固定填充的问题问题：当我们设置“pointPadding”和“pointWith”的值时，它会根据我们拥有的项目数量改变 pointPadding。 Goal/What 我们想要：无论我们有多少项目（行），填充都应该是一个精确值。

图片中你可以看到今天的结果，不是我们想要的！

有什么建议吗？

我们添加了一些示例代码现在的样子。

const table = {
  chart: {
    type: 'bar',
  },
  credits: {
    enabled: false
  },
  xAxis: [{
    categories: xAxisCategories,
    reversed: false,
  }],
  yAxis: [{
    allowDecimals: false,
    reversed: false,
    max: 10,
    min: 0,
    title: undefined,
    tickInterval: 1
  },
  {
    allowDecimals: false,
    reversed: false,
    opposite: true,
    max: 10,
    min: 0,
    title: undefined,
    tickInterval: 1
  }
  ],
  plotOptions: {
    bar: {
      groupPadding: 0.1,
      pointPadding: 15,
      grouping: false,
      shadow: false,
      dataLabels: {
        enabled: true,
        color: "black",
        x: -50
      }
    },
  },
  series: [{
    pointWidth: 35,
    pointPadding: 0.5,
    showInLegend: false,
    data: dataSeries,
    animation: {
      duration: 1000
    }
  }],
  title: {
    text: `${user.user.name} - ${theRelation}`,
    align: 'left',
    x: 40,
    style: {
      color: '#BBBBC9',
      fontSize: 12,
      XfontWeight: 'bold'
    }
  },
}

Answer 1

您可以使用 load 事件并根据点数和填充常量调整图表高度。

const adaptPadding = ({target: chart}) => {
    const padding = 20;
    const pointWidth = 35;
    const plotHeight = (chart.xAxis[0].max + 1) * padding + (chart.xAxis[0].max + 1) * pointWidth;

    chart.setSize(
        null,
        plotHeight + chart.chartHeight - chart.plotHeight,
        false
    );
}

Highcharts.chart('container', {
    chart: {
        events: {
            load: adaptPadding
        }
    },
    ...
});

Highcharts.chart('container2', {
    chart: {
        events: {
            load: adaptPadding
        }
    },
    ...
});

现场演示： http://jsfiddle.net/BlackLabel/16fogv07/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

修复了 Highcharts 中条形之间的填充

Fixed padding between the bars in Highcharts

highcharts