javascript - 如何根据 HighCharts 中的 x 轴类别调整条形图的大小

Question

我正在使用 Highcharts 添加一些条形图。当 x 轴上的值太少时，我的图表看起来有点稀疏；如果值太多，我的图表看起来又太拥挤。

我摆弄过 plotOptions 选项，例如 (pointPadding,groupPadding,borderWidth,pointWidt)。这似乎可以防止动态调整栏的大小以使其保持一致，但无助于调整整个图表的大小。

• 亚洲、美洲、欧洲、大洋洲、非洲的图表看起来像这样

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        visible:false
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            },
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0,
            pointWidth: 20
        }
    },
    legend: {
        enabled:false
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }]
});

<script src="https://code.highcharts.com/highcharts.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" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

• 只有亚洲的图表看起来像这样

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Asia'],
        title: {
            text: null
        }
    },
    yAxis: {
        visible:false
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            },
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0,
            pointWidth: 20
        }
    },
    legend: {
        enabled:false
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [635]
    }]
});

<script src="https://code.highcharts.com/highcharts.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" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

正如您所见，亚洲图表有很多未使用的空间，整体看起来很奇怪。

我想看看是否有人知道如何根据 X 轴类别中的值的数量动态更改图表的整体高度

Answer 1

您可以使用 chart.update() 方法根据柱数量添加新高度。检查下面发布的代码和演示。

代码:

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        var chart = this,
          barsLength = chart.series[0].data.length;

        chart.update({
          chart: {
            height: 100 + 50 * barsLength
          }
        }, true, false, false);
      }
    }
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  xAxis: {
    categories: ['Asia'],
    title: {
      text: null
    }
  },
  yAxis: {
    visible: false
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      pointPadding: 0,
      groupPadding: 0,
      borderWidth: 0,
      pointWidth: 20
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',
    data: [107]
  }]
});

<script src="https://code.highcharts.com/highcharts.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>

演示:

• https://jsfiddle.net/BlackLabel/x3e8brgq/1/

API 引用:

• https://api.highcharts.com/class-reference/Highcharts.Chart#update