如何格式化柱状图数据标签

问题描述

我试过的代码如下图所示

  [$（'＃voo-accepted-orders-graph'）。highcharts（{
 chart：{
 type ：'column'，
 backgroundColor：'＃9a97de'，
 minPadding：0.08，
 maxPadding：0.08，
}，
 title：{
 text ：''
}，
图例：{
启用：false，
}，
导出：{
启用：false 
}， 
学分：{
启用：false 
}，
 xAxis：{
 tickWidth：0，
 gridLineWidth：0，
 gridLineColor： ＃5c6bc0，
类别：\ ['accepted'，'auto-accept'，'sent to PO'，'transfers'\]，
 labels：{
 style：{ 
颜色：'#ffffff'，
 fontFamily：Avenir LT st d光，
 fontSize：12px，
 zIndex：1000 
} 
 
} 
}，
 y轴：{
 allowDecimals：false，
 title：{
 text：''
}，
 gridLineWidth：0，
 labels：{
 enabled：false 
}，
 min：0，
 
 tickInterval：20，
 
}，
 tooltip：{
 pointFormat：'{ series.name}< b> {point.y：，。0f}< / b>< br />'
 
}，
 plotOptions：{
列：{
 color：'＃8381cc'，
 borderColor：'＃8381cc'，
}，
系列：{
 borderWidth：0，
 dataLabels：{
 enabled：true，
 zIndex：10，
 color：#fff，
 style：{
 textShadow：false，
 fontWeight：normal，
} 
 
} 
} 
}，
 
系列：\ [{
 name ：'orders'，
 data：\ [200，72，36，15 \] 
 
}，{
名称：'price'，
 data ：\ [90,150,120,50 ...] 
 
} \] 
}）;] [1] 
  pre> 
 
 
另外
 1.需要格式化第二个栏。 
 2.是否有可能获得垂直线？ 
 
解决方案
如果您只想为一列数据更改标签，只需在该系列中的某个特定点添加更多属性即可。
 
 
 
使用您的问题中的代码，我更改了价格系列的第一个点，以便它的标签既是红色又是粗体： 
 
 
系列：[{
 name：'orders'，
 data：[200，72，36，15] 
 
}，{
 name：'price'，
 data：[
 {//更改此点的值
y：90，
 dataLabels：{
 color： '红'，
风格：{
 fontWeight：'b旧的'
} 
} 
}，
 150,120,50] 
}] 
  
关于在x轴标签后面添加背景的后续问题，我提到了 
 
 
 
你可以用这个找到工作小提琴例如： 
 
 
 
我希望这对您有所帮助。
 
How to Format column chart data labels as shown in the image, Need to format only the second bar.
The code i have tried shown below
[$('#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]
Also1. Need to format only the second bar.2. Is there any possibility to get the vertical lines.
 解决方案 
If you want to change labels for just one column of data, you simply add more attributes to a particular point in that series.
Using the code in your question, I changed the first point of the "price" series so that its label is both red and bold:
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]
}]
For your follow-up question on adding a background behind the x-axis labels, I referred to post Highchart: Background color of Axis. Here's the code I used:
First, before you define the chart options, I've added a function to draw a rectangle behind the x-axis labels.
  // the following code is derived from Mark's answer on:
  // https://stackoverflow.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();
  }
Next, I set some events in your chart options:
chart: {
  type: 'column',
  backgroundColor: '#9a97de',
  minPadding: 0.08,
  maxPadding: 0.08,
  // events code from https://stackoverflow.com/questions/20242302/highchart-background-color-of-axis
  events: {
    load: function() {
      drawRect(this);
    },
    redraw: function(){
      drawRect(this);
    }
  }
},
Here is the result:
You can find the working fiddle with this example here: http://jsfiddle.net/brightmatrix/0yLn5bky/
I hope this is helpful for you.
                        
这篇关于如何格式化柱状图数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！