[英]How to add additional labels to base of columns in Highcharts?
I need two labels for a column, one above to show the score and one below to show if it is a "test" or a "retest". 我需要为列添加两个标签,上面一个标签显示得分,下面一个标签显示它是“测试”还是“重新测试”。 How do I go about doing it? 我该怎么做呢?
I assume complicated calculation is needed, something like this? 我认为需要复杂的计算,像这样吗? http://jsfiddle.net/72xym/4/ (but I can't really understand) http://jsfiddle.net/72xym/4/ (但我不太了解)
I got other diagrams need to achieve this as well. 我还需要其他图表来实现这一目标。 Basically I need to do this: 基本上我需要这样做:
My code is inside here: http://jsfiddle.net/kscwx139/6/ 我的代码在这里: http : //jsfiddle.net/kscwx139/6/
I did this for the part to add the label: 我这样做是为了添加标签:
..., 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?
});
}
}
}
I would do something like this: 我会做这样的事情:
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
});
}
}
});
Demo: http://jsfiddle.net/kscwx139/7/ 演示: http : //jsfiddle.net/kscwx139/7/
Note: I would suggest using chart.redraw
event to update labels position ( label[i][j].animate({ x: ..., y: ... });
) when resizing browser, updating data, etc. 注意:我建议在调整浏览器大小,更新数据等时,使用chart.redraw
事件更新标签位置( label[i][j].animate({ x: ..., y: ... });
)。
Short explanation: 简短说明:
point.plotX
- x-position in the plotting area (center of the point's shape) point.plotX
绘图区域中的x位置(点形状的中心) this.plotLeft
- left offset for left yAxis (labels, title) this.plotLeft
左侧this.plotLeft
左侧偏移(标签,标题) point.series.pointXOffset
- offset for multiple columns in the same category point.series.pointXOffset
同一类别中多个列的偏移量 this.plotTop
- the same as plotLeft
but from top ;) this.plotTop
与plotLeft
相同,但从顶部;) this.plotHeight
- height of the plotting area this.plotHeight
绘图区域的高度 labelBBox.height
- height of the label to place it above the xAxis line labelBBox.height
将标签放置在xAxis线上方的高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.