如何在Highcharts的列基础中添加其他标签？

Question

我需要为列添加两个标签，上面一个标签显示得分，下面一个标签显示它是“测试”还是“重新测试”。 我该怎么做呢？

我认为需要复杂的计算，像这样吗？ http://jsfiddle.net/72xym/4/ （但我不太了解）

我还需要其他图表来实现这一目标。 基本上我需要这样做：

我的代码在这里： http : //jsfiddle.net/kscwx139/6/

我这样做是为了添加标签：

..., function() {
    var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[];
    for(i=0; i<this.series.length; i++) {
        labels[i] = [];
        for(j=0; j<this.series[i].data.length; j++) {
            labels[i][j] = this.renderer.label(self.series[i].name)
                .css({
                width: '100px',
                color: '#000000',
                fontSize: '12px'
            }).attr({
                zIndex: 100
            }).add();

            labelBBox = labels[i][j].getBBox();
            labels[i][j].attr({
                x: 100, //1) what to put here?
                y: 100 //2) what to put here?
            });
        }
    }
}

Answer 1

我会做这样的事情：

var chart2 = new Highcharts.Chart(options2, function() {
  var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[], point;
  for(i=0; i<this.series.length; i++) {
    labels[i] = [];
    for(j=0; j<this.series[i].data.length; j++) {
        labels[i][j] = this.renderer.label(self.series[i].name)
            .css({
            width: '100px',
            color: '#000000',
            fontSize: '12px'
        }).attr({
            zIndex: 100,
            align: "center"
        }).add();

        point = this.series[i].data[j];
        labelBBox = labels[i][j].getBBox();
        labels[i][j].attr({
            x: point.plotX + this.plotLeft + point.series.pointXOffset + point.shapeArgs.width / 2, 
            y: this.plotTop + this.plotHeight - labelBBox.height
        });
    }
  }
});

演示： http ： //jsfiddle.net/kscwx139/7/

注意：我建议在调整浏览器大小，更新数据等时，使用chart.redraw事件更新标签位置（ label[i][j].animate({ x: ..., y: ... }); ）。

简短说明：

• point.plotX绘图区域中的x位置（点形状的中心）
• this.plotLeft左侧this.plotLeft左侧偏移（标签，标题）
• point.series.pointXOffset同一类别中多个列的偏移量
• this.plotTop与plotLeft相同，但从顶部;）
• this.plotHeight绘图区域的高度
• labelBBox.height将标签放置在xAxis线上方的高度