如何根据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