如何格式化柱状图数据标签
如何格式化柱状图数据标签如图所示，只需要格式化第二个条。
我试过的代码如下所示
[$('#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} {point.y:,.0f}
' }, 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] 另外1.只需格式化第二个栏。 2.是否有可能获得垂直线。
2016年7月8日 ：我已更新此答案，以解决原始海报关于在x轴标签后面添加背景的后续问题。
如果只想更改一列数据的标签，只需向该系列中的特定点添加更多属性即可。
使用您问题中的代码，我更改了“价格”系列的第一个点，使其标签为红色和粗体：
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] }]
关于在x轴标签后面添加背景的后续问题，我提到了postHighchart：Axis的背景颜色 。 这是我使用的代码：
首先，在定义图表选项之前，我添加了一个函数来在x轴标签后面绘制一个矩形。
// 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(); }
接下来，我在您的图表选项中设置了一些事件：
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); } } },
结果如下：
你可以在这里找到这个例子的工作小提琴： http ： //jsfiddle.net/brightmatrix/0yLn5bky/
我希望这对你有所帮助。
/* 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; }