在Highcharts中,如何为多棱锥图中的每个棱锥设置标题
In Highcharts, how to set up title for each pyramid in a multi-pyramid chart
场景是,一个动态的多棱锥图,棱锥数字、棱锥位置、屏幕大小和其他参数都可能不同。我正在寻找一种在每个金字塔顶部显示系列名称作为标题的方法。
我已经找到了"如何在多饼图中为每个饼图设置标题",通过扩展当前库:
Highcharts.seriesTypes.pie.prototype.setTitle = function (titleOption) {
var chart = this.chart,
center = this.center || (this.yAxis && this.yAxis.center),
labelBox,
box,
format;
if (center && titleOption) {
var centerX = center[0],
centerY = center[1],
diameter = center[2];
box = {
x: chart.plotLeft + centerX - 0.5 * diameter,
y: chart.plotTop + centerY - 0.5 * diameter,
width: diameter,
height: diameter
};
format = titleOption.text || titleOption.format;
format = Highcharts.format(format, this);
if (this.title) {
this.title.attr({
text: format
});
} else {
this.title = this.chart.renderer.label(format)
.css(titleOption.style)
.add();
}
labelBox = this.title.getBBox();
titleOption.width = labelBox.width;
titleOption.height = labelBox.height;
this.title.align(titleOption, null, box);
}
};
但我不能把类似的方法应用于金字塔。因此,我的问题是,在一个有多个金字塔的金字塔图中,有没有办法为每个金字塔设置标题?
这是一把小提琴:https://jsfiddle.net/scottszb1987/hsbepxo5/
将此选项添加到您的图表中应该与将该选项添加到饼图中几乎相同。
Highcharts.seriesTypes.pyramid.prototype.setTitle = function(titleOption) {
var chart = this.chart,
center = this.center || (this.yAxis && this.yAxis.center),
labelBox,
box,
format;
if (center && titleOption) {
var centerX = center[0],
centerY = center[1],
diameter = center[2];
centerY < 0 ? 2 * diameter : centerY
box = {
x: chart.plotLeft + centerX - 0.5 * diameter,
y: centerY - 0.5 * diameter,
width: diameter,
height: diameter
};
format = titleOption.text || titleOption.format;
format = Highcharts.format(format, this);
if (this.title) {
this.title.attr({
text: format
});
} else {
this.title = this.chart.renderer.label(format)
.css(titleOption.style)
.add();
}
labelBox = this.title.getBBox();
titleOption.width = labelBox.width;
titleOption.height = labelBox.height;
this.title.align(titleOption, null, box);
}
};
我认为这个问题与Highcharts的小错误有关,即错误计算金字塔图的中心位置。在这里,您可以在Highcharts github上找到有关此问题的信息:https://github.com/highcharts/highcharts/issues/5500
在这里,您可以看到setTitle由于这个问题而部分工作:http://jsfiddle.net/hsbepxo5/1/
我认为,作为一种变通方法,您可以考虑使用renderer.text,而不是在图表中添加新功能:http://api.highcharts.com/highcharts#Renderer.text
致问候,
相关文章:
- React组件-设置页面标题
- 如何在自动完成时设置属性标题
- 是否可以像在$routeProvider中一样在 Angular AMD 中设置页面标题
- 如何在动态树标题中的输入字段上设置焦点
- 设置PDF页面的浏览器标题
- Ext JS 5.1:当可折叠为true时,无法对面板进行标题设置
- 使用javascript设置html页面的标题
- 正在为禁用的输入设置标题属性
- 如何打开jQuery对话框并将其标题自动设置为HTML标记中的属性
- 如何在dgrid中设置列内容的样式,而不设置列标题的样式
- 设置 Jquery 对话框标题栏样式
- 为HTML文本区域设置标题属性的样式
- jQuery ticker - 如何为 #ticker 标题设置 URL
- H1 标题设置不正确
- AG-Grid 将列标题设置为复选框,然后执行全选或取消全选列,而不是仅组
- MVC4引导JQuery-将下拉标题设置为所选项目
- 在JSP中将按钮标题设置为bean消息
- 将HTML中的按钮标题设置为非格式化文本
- Google 日历标题设置为“无显示”
- 如何为我的d3图表标题设置文本颜色