сохранить фиксированный размер баров в Highcharts

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

при добавлении четырех значений столбцы становятся меньше. введите здесь описание изображения

Я хочу, чтобы все полосы были одинакового размера. независимо от того, что мне нужно прокручивать, чтобы увидеть другие полосы (это то, что я хочу).

это мой код: http://jsfiddle.net/Laxfsbtb/

$('#container').highcharts({
        chart: {
            type: 'bar'
        },

         series: [{
          name: 'text1',
          data: [1000, 950,920,880,850,234],
          color: "#FF0000"
      }, {
          name: 'text2',
          data: [800,770,750,740,730,4324],
          color: "#000000"

      }, {
          name: 'text3',
          data: [600,540,535,500,400,324],
          color: "#00FF00"

      }]
    });
});

javascript css highcharts highcharts-ng
person Community    schedule 08.01.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Не уверен, что именно вы ищете, но это может помочь.

Некоторое время назад я собрал пример, чтобы отрегулировать высоту графика в соответствии с количеством баров, используя некоторые предустановленные параметры:

var barCount     = chartData.length; 
var pointWidth   = 20;
var marginTop    = 60;
var marginRight  = 10;
var marginBottom = 50;
var marginLeft   = 100;
var pointPadding = 0.3;

var chartHeight = marginTop 
            + marginBottom 
            + ((pointWidth * barCount) * (1 + groupPadding + pointPadding));

Итак, скажите, какого размера вам нужны столбцы, сколько отступов между ними, сколько полей вверху и внизу диаграммы и сколько точек данных у вас есть.

Столбцы останутся того же размера и интервала между ними, в то время как сама диаграмма будет увеличиваться, чтобы вместить их.

пример:

Чтобы увидеть, как это работает, измените 12 в этой строке:

var chartData = randomData(12, true);

На любой номер, который вы хотите.

((Редактировать

Поскольку вы работаете со сгруппированными данными, вам придется немного изменить математику. Вам нужно будет учесть количество групп и умножить шляпу на groupPadding, добавленное к количеству точек * pointPadding.

Вам также придется немного усложнить подсчет точек данных.

person jlbriggs    schedule 08.01.2016
comment
@jbriggs здорово, но как я могу настроить размер полос? в основном мне нужно поставить все бары одного размера, сколько бы баров там ни было. - person ; 09.01.2016
comment
Пользуюсь случаем спросить. как сделать так, чтобы между стержнями одной категории не было промежутков? - person ; 09.01.2016
comment
Это то, что делает его пример - сохраняет все столбцы одинакового размера и вместо этого увеличивает размер диаграммы. pointWidth управляет размером полосы; pointPadding управляет зазором между точками, а groupPadding управляет зазором между группами. - person jlbriggs; 09.01.2016

arrow_upward
1
arrow_downward

Это можно сделать с помощью параметра pointWidth, например:

plotOptions: {
  series: {
    pointWidth: 20 //width of the bar/column/point.
  }
},

Чтобы разрешить scrollbar, вам, вероятно, следует перейти на highstock, но это работает только горизонтально. Или вы можете настроить div, который позволяет диаграмме быть «больше» внутри и прокручивать это div окно.

person wergeld    schedule 08.01.2016
comment
в основном мне нужно поставить все бары одного размера, сколько бы баров там ни было. - person ; 09.01.2016
comment
Пользуюсь случаем спросить. как сделать так, чтобы между стержнями одной категории не было промежутков? - person ; 09.01.2016
comment
К сожалению, в этом случае вещи складываются в вертикальный режим, когда у вас есть группы данных в категории. - person EllisGL; 21.08.2020