Jak mogę zrobić w Highchart, aby mieć 1px spacji między kolumnami i osią y?

Question

Muszę zrobić wykres kolumnowy przy użyciu highcharts, które ma 1px spację między kolumnami i osią Y, jak dodać 1px spację, która jest w moim pożądanym wykresie do wykresu, który zrobiłem, to jest kod, który zrobiłem: (przykro mi, że nie mają wystarczającej reputacji do dodawania obrazów, dlatego nie mam pisać wtedy)

var data = [ 20, 29, 25, 29, 21, 17, 20, 19, 18]; 
createMeasuresGraph(data, "quintals-sugar-graph"); 
function createMeasuresGraph(data, container) { 
    data[0] = { color: '#55B647', y: data[0] }; 
    data[data.length -2 ] = { color: '#F15B49', y: data[data.length -2 ] }; 
    var chart = new Highcharts.Chart({ 
     chart: { 
      marginBottom: 1, 
      marginLeft: 0, 
      marginRight: 0, 
      marginTop: 0, 
      renderTo: container, 
      type: 'column', 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      column: { 
       pointWidth: 5, 
      }, 
      series: { 
       borderWidth: .1, 

      } 
     }, 
     series: [{ 
      data: data, 
      color: '#95D2F3', 
      shadow: false, 
     }], 
     title: { 
      text: '' 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     xAxis: { 
      labels: { 
       enabled: false 
      }, 
      title: { 
       enabled: false 
      }, 
      lineColor: '#CBCBCB', 
      tickWidth: 0 
     }, 
     yAxis: { 
      endOnTick: false, 
      gridLineWidth: 0, 
      labels: { 
       enabled: false 
      }, 
      startOnTick: false, 
      minPadding: 0.5, 
      title: { 
       text: "" 
      } 
     } 
    }); 
} 

widzę też, że przestrzeń pomiędzy nie jest taka sama we wszystkich kolumnach, może używam źle aproch, aby uzyskać miejsca, co by było najlepiej?

Answer 1

Potrzebujesz 1px spacji między każdą kolumną?

Chciałbym obliczyć szerokość kolumny na podstawie wielkości Działka/Liczba kolumn:

var colWidth = ($('#quintals-sugar-graph').width()/data.length) + 1; 

następnie ustawić „borderWidth” do 1px, aby zapewnić przestrzeń:

plotOptions: { 
     column: { 
      pointWidth: colWidth, 
      borderWidth: 1 
     }, 

    }, 

Fiddle here.

Answer 2

Czy naprawdę trzeba szerokość być dokładnie 1px? Jeśli nie, następuje również zostawić minimalny odstęp między kolumnami i byłoby wygodniej:

plotOptions: { 
    column: { 
     pointPadding: 0, 
     groupPadding: 0 
    } 
} 

Answer 3

Można po prostu zrobić:

plotOptions: { 
    column: { 
    pointPadding: 0, 
    groupPadding: 0, 
    borderWidth: 1 
    } 
},