Maksymalna szerokość bar na wykresach kolumnowych Highcharts

Question

Używam Highcharts aby utworzyć kilka pionowych pasków (aka „kolumna wykresy”) dużo jak tutaj: highcharts.com/demo/column-basic

Chodzi o to, czasami istnieje 30 barów na wykresie, czasami tylko dwa. Gdzie są dwa naprawdę szerokie paski na wykresie, wygląda naprawdę dziwnie, więc podjęto decyzję o ustawieniu maksymalnej szerokości prętów. W ten sposób, jeśli są tylko dwa, nie będą one szersze niż, powiedzmy, 50 pikseli, ale gdyby było 50, to Highcharts mógłby je dopasować w sposób, jaki uzna za stosowny.

Moim problemem jest to, że Highcharts nie ma sposobu, aby jawnie ustawić maksymalną szerokość kolumn. Czy ktoś znalazł rozwiązanie tego problemu?

Answer 1

Aktualizacja: Od wersji Highcharts 4.1.8, patrz Adam Goodwin's answer, below.

---

---

Przez wiele lat jedynym sposobem, aby ustawić maksymalną szerokość kolumn, był dynamicznie poprzez JavaScript.

Zasadniczo:

1. Sprawdź bieżący pasek szerokości.
2. Jeśli jest większy niż wymagany, zresetuj serię "pointWidth.
3. Wymuś odświeżenie, aby zmiana była widoczna.

Coś jak:

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); 
    } 
} 

See the demo at jsFiddle.

Answer 2

lepszym sposobem będzie sugerował

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

sprawdzić ten skrzypce

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

wystarczy dodać

 series: { 
       pointWidth: 20 
      } 

w was opcje wydruku i to wszystko. :) cieszyć się okrzyki ...

Answer 3

użyłem spacingTop przypisują wymusić maksymalną pointWidth na wykresie słupkowym:

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

Więc jeśli istnieje jeden bar na pewną szerokość odstęp zostanie skorygowany, a wykres jest narysowany jako mniejszy.

Nie zmienia to rozmiaru kontenera, ale utrzymuje paski poniżej określonego rozmiaru, a nie ma to wpływu na metodę pointPadding i groupPadding.

Można zrobić to samo z spacingRight i mieć spójny wykres bez brzydkich przestrzeni między prętami.

Answer 4

rozwiązanie Ultimate to owinąć drawPoints i nadpisać shaperArgs każdego punktu, zwłaszcza x-położenie i szerokość:

(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) 

Zastosowanie:

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

A demo na żywo: http://jsfiddle.net/83M3T/1/

Answer 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/

Answer 6

W moim przypadku ustawienie pointRange na 1 było tym, czego potrzebowałem. Jeśli kategoria z pudełkiem sąsiadowała z kategorią bez pudełka (tylko wartości odstające w serii rozproszonej) pole będzie szersze niż kategoria.

Istnieje dobre wyjaśnienie here.

Answer 7

Oczywiście pytano dawno temu, kiedy ta funkcja nie istnieje, ale jak Highcharts 4.1.8 można to zrobić bez żadnego obejścia przy użyciu ustawienia 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... */ 
}); 

Poniżej JSFiddle podstawowego przykład wykres kolumnowy, zmodyfikowany, aby pokazać pracy:

http://jsfiddle.net/vu3dubhb/

a dokumentacja dla tego ustawienia jest tutaj: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

Answer 8

Zmierzyłem ten sam problem z HighCharts i tak to naprawiłem !!

- Utwórz przekładkę div dla wykresu, z pewną minimalną szerokością i przepełnieniem: auto. (Aby włączyć przewijanie w poziomie):

- Ustaw "pointWidth" każdego słupka na wymaganą wartość. (powiedz: pointWidth: 75)

- Teraz dynamicznie ustaw wykresu na podstawie liczby słupków.

Zastosowanie chartWidth = (liczba barów) * (pointWidth) * 2

Tak więc, jeśli masz 15 barów, chartWidth = 15 * 75 * 2 = 2250px, gdzie 2 jest używany do tworzenia większej szerokości wykresu, aby pomieścić odstępy między prętami.

--W ten sposób można mieć dowolną liczbę prętów samej szerokości w przewijalnej wykresie ... :)