Tôi có thể làm gì trong Highchart để có khoảng cách 1px giữa các cột và trục y?

Question

Tôi phải làm biểu đồ cột bằng các cột cao có khoảng cách 1px giữa các cột màu và trục Y, làm cách nào tôi có thể thêm khoảng trống 1px vào biểu đồ mong muốn vào biểu đồ mà tôi đã làm, đây là mã tôi đã làm: (Xin lỗi tôi không có đủ danh tiếng để thêm hình ảnh đó là lý do tại sao tôi chưa đăng bài đó)

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

Tôi cũng thấy rằng khoảng cách giữa không giống nhau trong tất cả các cột, có thể tôi đang sử dụng sai aproch để có được không gian, những gì nó sẽ là tốt nhất?

Answer 1

Bạn muốn có khoảng cách 1px giữa mỗi cột?

tôi sẽ tính toán độ rộng cột dựa trên kích thước của cốt truyện/số cột:

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

Sau đó thiết lập các "borderWidth" để 1px để cung cấp các không gian:

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

    }, 

Fiddle here.

Answer 2

Bạn có thực sự cần chiều rộng được 1px chính xác? Nếu không, sau đây cũng để lại không gian tối thiểu giữa cột và sẽ thuận tiện hơn:

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

Answer 3

Bạn chỉ có thể làm:

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