如何在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線上方的高度