Question

如何如图所示格式化柱状图数据标签，只需要格式化第二个条。

我尝试过的代码如下所示

[$('#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]

另外 1.只需格式化第二个栏。 2.是否有可能获得垂直线。

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

2016年7月8日：我已更新此答案，以解决原始海报的后续问题，即有关添加背景背后的信息 -axis标签。

如果您只想更改一列数据的标签，只需向该系列中的特定点添加更多属性即可。

使用你问题中的代码，我改变了＆＃34;价格＆＃34;的第一点。系列使其标签为红色和粗体：

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轴标签后面添加背景的后续问题，我提到了帖子Highchart: Background color of 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/

我希望这对你有所帮助。

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

2 个答案:

的 CODEPEN