jquery - porcentajes - Cómo formatear las etiquetas de datos del gráfico de columnas

poner porcentaje en grafico de barras excel

Question

Cómo formatear las etiquetas de datos del gráfico de columnas como se muestra en la imagen, Necesidad de formatear solo la segunda barra.

El código que he intentado mostrar a continuación

[$(''#voo-accepted-orders-graph'').highcharts({
    chart: {
        type: ''column'',
        backgroundColor: ''#9a97de'',
        minPadding: 0.08,
        maxPadding: 0.08,
    },
    title: {
        text: ''''
    },
    legend: {
        enabled: false,
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    xAxis: {
        tickWidth: 0,
        gridLineWidth: 0,
        gridLineColor: "#5c6bc0",
        categories: /[''accepted'', ''auto-accept'', ''sent to PO'', ''transfers''/],
        labels: {
            style: {
                color: ''#ffffff'',
                fontFamily: "Avenir LT std light",
                fontSize: "12px",
                zIndex: 1000
            }

        }
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: ''''
        },
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        min: 0,

        tickInterval: 20,

    },
    tooltip: {
        pointFormat: ''{series.name} <b>{point.y:,.0f}</b><br/>''

    },
    plotOptions: {
        column: {
            color: ''#8381cc'',
            borderColor: ''#8381cc'',
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                zIndex: 10,
                color: "#fff",                
                style: {
                    textShadow: false,
                    fontWeight: "normal",
                }

            }
        }
    },

    series: /[{
        name: ''orders'',
        data: /[200, 72, 36, 15/]

    }, {
        name: ''price'',
        data: /[90, 150, 120, 50/]

    }/]
});][1]

También 1. Necesita formatear solo la segunda barra. 2. ¿Hay alguna posibilidad de obtener las líneas verticales.

Answer 1

/* bar bg */
.highcharts-series-1 rect:nth-child(1) {
  fill: #333;
}

/* text color above bar */
.highcharts-series-1 g:nth-child(1) text {
  fill: red !important;
}

/* x axis text colors */
.highcharts-xaxis-labels text:nth-child(1) {
  fill: green !important;
}
.highcharts-xaxis-labels text:nth-child(2) {
  fill: blue !important;
}
.highcharts-xaxis-labels text:nth-child(3) {
  fill: black !important;
}
.highcharts-xaxis-labels text:nth-child(4) {
  fill: pink !important;
}

CODEPEN

Answer 2

8 de julio de 2016 : He actualizado esta respuesta para abordar la pregunta de seguimiento del póster original sobre cómo agregar un fondo detrás de las etiquetas del eje x.

Si desea cambiar las etiquetas de una sola columna de datos, simplemente agregue más atributos a un punto particular de esa serie.

Usando el código en su pregunta, cambié el primer punto de la serie "precio" para que su etiqueta sea roja y negrita:

series: [{
    name: ''orders'',
    data: [200, 72, 36, 15]

}, {
    name: ''price'',
    data: [
        { // change the values for just this point
            y: 90, 
            dataLabels: { 
                color: ''red'',
                style: {
                    fontWeight: ''bold''
                }
            } 
        },
        150, 120, 50]
}]

Para su pregunta de seguimiento sobre cómo agregar un fondo detrás de las etiquetas del eje x, me referí al post Highchart: color de fondo de Axis . Aquí está el código que utilicé:

Primero, antes de definir las opciones del gráfico, agregué una función para dibujar un rectángulo detrás de las etiquetas del eje x.

  // the following code is derived from Mark''s answer on:
  // https://.com/questions/20242302/highchart-background-color-of-axis
  // and using the setExtremes() function found in the Highcharts API documentation at:
  // http://api.highcharts.com/highcharts#Axis.getExtremes
  var rect = null;
  function drawRect(chart){
    if (rect){
      rect.element.remove();   
    }
    // this code draws a rectangle based on the chart''s dimensions:
    // 1st attribute: left edge = 0
    // 2nd attribute: top edge = chart''s height - (chart''s bottom margin - 1) ... -1 to show axis baseline
    // 3rd attribute: width = chart''s width
    // 4th attribute: height = chart''s bottom margin
    // 5th attribute: corner radius = 0 ... no corners
    rect = chart.renderer.rect(0, chart.chartHeight - (chart.marginBottom-1), chart.chartWidth , chart.marginBottom, 0)
      .attr({
      ''stroke-width'': 0,
      stroke: ''#888888'',
      fill: ''#888888'',
      zIndex: 3
    })
      .add();
  }

A continuación, configuré algunos eventos en sus opciones de gráfico:

chart: {
  type: ''column'',
  backgroundColor: ''#9a97de'',
  minPadding: 0.08,
  maxPadding: 0.08,
  // events code from https://.com/questions/20242302/highchart-background-color-of-axis
  events: {
    load: function() {
      drawRect(this);
    },
    redraw: function(){
      drawRect(this);
    }
  }   
},

Aquí está el resultado:

Puede encontrar el violín que funciona con este ejemplo aquí: http://jsfiddle.net/brightmatrix/0yLn5bky/

Espero que esto sea útil para usted.