如何格式化柱状图数据标签 [英] How to format column chart data labels

问题描述

我试过的代码如下图所示

  [$（'＃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.是否有可能获得垂直线？ 
 
解决方案
 
 
 
  2016年7月8日：我已更新此答案，以解决原始海报的后续问题，即有关在x轴标签后面添加背景。
 
 
如果您只想为一列数据更改标签，只需在该系列中的某个特定点添加更多属性即可。
 
 
 
使用您的问题中的代码，我更改了价格系列的第一个点，以便它的标签既是红色又是粗体： 
 
 
系列：[{
 name：'orders'，
 data：[200，72，36，15] 
 
}，{
 name：'price'，
 data：[
 {//更改此点的值
y：90，
 dataLabels：{
 color： '红'，
风格：{
 fontWeight：'b旧的'
} 
} 
}，
 150,120,50] 
}] 
  
关于在x轴标签后面添加背景的后续问题，我提到了 
 
 
 
你可以用这个找到工作小提琴例如： http://jsfiddle.net/brightmatrix/0yLn5bky/  
 
 
 
我希望这对您有所帮助。
 
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]
Also
1. Need to format only the second bar.
2. Is there any possibility to get the vertical lines.
解决方案

  
July 8, 2016: I've updated this answer to address the original poster's follow-up question about adding a background behind the x-axis labels.
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.

                        
这篇关于如何格式化柱状图数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！