¿Cómo puedo hacer en Highchart para tener 1px de espacio entre las columnas y el eje y?

Tengo que hacer un gráfico de columnas usando diagramas altos que tengan 1px de espacio entre las columnas y el eje Y, ¿cómo puedo agregar el espacio de 1px que está en mi gráfico deseado al gráfico que hice, este es el código que hice: lo siento, no tengo la reputación suficiente para añadir imágenes es por eso que no he publicar a continuación)¿Cómo puedo hacer en Highchart para tener 1px de espacio entre las columnas y el eje y?

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

yo que ve también que el espacio entre no es la misma en todas las columnas, tal vez estoy usando una Aproch equivocado para obtener los espacios, ¿qué sería mejor?

Fuente

2012-09-03 mkhuete

¿Desea un espacio de 1px entre cada columna?

Me gustaría calcular el ancho de la columna en función del tamaño de la trama/número de columnas:

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

Luego ajuste el "borderWidth" para 1px para proporcionar el espacio:

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

    },

Fiddle here.

enter image description here

Fuente

2012-09-03 21:00:22 Mark

Muchas gracias, esto es exactamente lo que quería hacer – mkhuete

lo que realmente necesita el ancho a ser de 1 píxel exactamente? Si no, el siguiente también dejar un espacio mínimo entre las columnas y sería más conveniente:

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

Fuente

2013-05-16 12:45:10 ricca

Se tenía que ser 1px, como se lo exigía así en el diseño del diseñador web, sabía que a veces el diseño no se podía hacer como pixelperfect – mkhuete

Simplemente puede hacer:

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

Fuente

2014-07-22 16:59:10 Zamith

¿Cómo puedo hacer en Highchart para tener 1px de espacio entre las columnas y el eje y?

Respuesta

Cuestiones relacionadas