Максимальная ширина штриха в диаграммах столбцов Highcharts

Ответ 1

Обновление: Как и в Highcharts версии 4.1.8, см. ответ Адама Гудвина ниже.

В течение многих лет единственный способ установить максимальную ширину столбцов был динамически с помощью JavaScript.

В принципе:

• Проверьте текущую ширину полосы.
• Если оно больше желаемого, reset серия 'pointWidth.
• Настройте перерисовку, чтобы сделать видимым изменение.

Что-то вроде:

var chart = new Highcharts.Chart ( { ... ...

//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series          = chart.series[0];

if (series.data.length) {

    if (series.data[0].barW  >  MaximumBarWidth) {
        series.options.pointWidth = MaximumBarWidth;
        /*--- Force a redraw.  Note that redraw() will not 
            fire in this case!
            Hence we use something like setSize().
        */
        chart.setSize (400, 300);   
    }
}

См. демонстрацию в jsFiddle.

Ответ 2

Очевидно, этот вопрос был задан давно, когда эта функция не существовала, но с Highcharts 4.1.8 вы можете сделать это без каких-либо обходных решений, используя параметр plotOptions.column.maxPointWidth:

$('#container').highcharts({
    /* Other chart settings here... */
    plotOptions: {
        column: {
            /* Here is the setting to limit the maximum column width. */
            maxPointWidth: 50
        }
    }
    /* Other chart settings here... */
});

Ниже приведен пример JSFiddle примера базовой диаграммы, измененный, чтобы показать это:

http://jsfiddle.net/vu3dubhb/

И документация для этого параметра находится здесь: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

Ответ 3

Конечным решением является обертка drawPoints и перезапись shaperArgs каждой точки, особенно x-позиция и ширина:

(function(H) { 
    var each = H.each;
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        var series = this;
        if(series.data.length > 0 ){
            var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
            each(this.data, function(point) {
                point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                point.shapeArgs.width = width;
            });
        }
        proceed.call(this);
    })
})(Highcharts)

Использование:

$('#container').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
        maxPointWidth: 50,
        data: [ ... ]
    }]
});

И живая демонстрация: http://jsfiddle.net/83M3T/1/

Ответ 4

лучший способ предложил бы

http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width

проверьте эту скрипту

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/

просто добавьте

     series: {
                 pointWidth: 20
             }

в настройках сюжета и т.д.:) наслаждайтесь приветствиями...

Ответ 5

function(chart){
        var series = chart.series[0];
        //--- Enforce a Maximum bar width
        if (series && series.data.length) {
            if (series.data[0].pointWidth  >  MaximumBarWidth) {
                for(var i=0;i< chart.series.length;i++)
                  chart.series[i].update({
                    pointWidth:MaximumBarWidth
                    });
            }
        }
    }

http://jsfiddle.net/pXZRV/40/

Ответ 6

Я использовал атрибут spacingTop для обеспечения максимальной максимальной ширины точки на гистограмме:

if (series[0].data[0].pointWidth > maximumBarWidth) {
     this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
     this.isDirtyBox = true;
     this.redraw();
}

Итак, если есть один бар над определенной шириной, интервал будет отрегулирован, а график будет меньше.

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

Вы можете сделать то же самое с spacingRight и иметь согласованную диаграмму без уродливых пробелов между столбцами.

Ответ 7

В моем случае установка pointRange в 1 была тем, что мне было нужно. Если категория с полем была смежна с категорией без ящика (только выбросы в серии рассеяния), поле будет шире, чем категория.

Существует хорошее объяснение здесь.

Ответ 8

Я столкнулся с той же проблемой, используя HighCharts, и вот как я ее исправил!!

- Создайте обертку div для диаграммы с минимальной шириной и переполнением: auto. (Чтобы включить горизонтальную прокрутку)

- Установите "pointWidth" каждого столбца в нужное значение. (скажем, pointWidth: 75)

- Теперь динамически настройте диаграмму ширины в зависимости от количества баров.

Использовать chartWidth = (количество баров) * (pointWidth) * 2

Итак, если у вас 15 баров, chartWidth = 15 * 75 * 2 = 2250px, где 2 используется для создания большей ширины диаграммы, чтобы разместить расстояние между столбцами.

- Таким образом, вы можете иметь любое количество баров одинаковой ширины в прокручиваемой диаграмме...:)