Как изменить размер гистограммы, основываясь на отсутствии категорий оси x в HighCharts

Question

Я работаю над добавлением некоторых гистограмм, используя Highcharts. Моя диаграмма выглядит немного разреженной, когда на оси х слишком мало значений, и слишком много, если значений слишком много.

Я возился с такими параметрами 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