Ширина Highcharts продолжает расширяться с ростом ширины диаграммы

Question

То, чего я пытаюсь добиться, - это иметь высокие диаграммы, ширина которых продолжает увеличиваться с увеличением точек данных

В настоящее время у меня есть следующее

AM использует vuejs с старшими чартами, но должен быть похож на jquery или другие

<div class="col-md-6" style="overflow:auto"> //set overflow css
   <div id="container_h"></div>
<div>

теперь код скрипта, который отображает старшую диаграмму

      this.chart = Highcharts.chart('container_h', {
                chart: {
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: this.ranges
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total trucks'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: this.chartdata
            });

Приведенный выше выводит диаграмму с

Что я с нетерпением жду, так это то, что столбцы старшей диаграммы имеют фиксированную ширину, которая при увеличении создает прокрутку на x-axis, поэтому что-то вроде этого

с областью прокрутки

Как мне этого добиться?

Answer 1

Вам нужно использовать highstock.js.

Там уже есть ответ: Как сделать так, чтобы старшие диаграммы можно было прокручивать по горизонтали при большом диапазоне по оси X благодаря @ Gopinagh.R

Два способа достижения полосы прокрутки.

Вариант 1

Вам нужно будет использовать highstock.js и вместо рендеринга График акций, вы должны визуализировать Highchart .

Затем включите полосу прокрутки

  scrollbar: {
        enabled: true
    }

Проверьте API для полосы прокрутки и связанных операций http://api.highcharts.com/highstock#scrollbar.

http://jsfiddle.net/gopinaghr/kUSyF/1/ Я возился с примером.

Вариант 2

Попробуйте установить min & max атрибуты для x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/