Question

我需要一个列的两个标签，一个用于显示分数，另一个用于显示是否为＆＃34;测试＆＃34;或者重新测试＆＃34;。我该怎么做呢？

我认为需要复杂的计算，这样的事情？ http://jsfiddle.net/72xym/4/（但我无法理解）

我还有其他图表需要实现这一点。基本上我需要这样做：

我为部件添加了标签：

..., 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 - 左侧yAxis的左偏移量（标签，标题）
point.series.pointXOffset - 同一类别中多列的偏移量
this.plotTop - 与plotLeft相同，但来自顶部;）
this.plotHeight - 绘图区域的高度
labelBBox.height - 将其置于xAxis线上方的标签高度

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

1 个答案: