高图（grouped_category样式）和工具提示格式化程序不起作用
Zeina
我尚未尝试构建一个复杂的仪表板，该仪表板显示项目阶段选项（按子阶段分组）和每个阶段的里程碑。 
我遇到的问题如下：
当我将鼠标悬停在里程碑（金钻石-散点图）上时，我需要显示一个特定的值，即里程碑名称（x轴或y轴均未显示）。我使用了格式化程序功能，但仍然无法正常工作（好像它一开始没有触发）。
另一部分与组的样式有关。我需要为组添加一些背景颜色，调整组的长度（现在的文本尤其不适用于较低的屏幕分辨率）。我没有找到解决这两个问题的方法。
我正在发布所有代码，因为我希望其中会有一些错误。因此，感谢您的帮助。
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Project Name'
},
subtitle: {
text: 'Phasen und Meilensteine des Vergabeverfahrens'
},
xAxis: {
labels: {
groupedOptions: [{
style: {
'fontSize': '1.2em',
'backgroundColor' : '#f7f7f7',
color: 'red'
}
}, {
rotation: 0, // rotate labels for a 2nd-level
align: 'left'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: [{
name: 'Phase 1<br/>Vorbereitung',
categories: ["some test text ",
"some test text ",
"some test text ",
"some test text "]
}, {
name: "Phase 2<br/>Teilnahmewettbewerb",
categories: ["some test text ",
"some test text ",
"some test text ",
"some test text "]
}, {
name: "Phase 3<br/>Angebotsphase",
categories: ["some test text ",
"some test text ",
"some test text ",
"some test text "]
}, {
name: "Phase 4<br/>Vergabeentscheidung",
categories: ["some test text ",
"some test text ",
"some test text ",
"some test text "]
}]
},
yAxis: {
type: 'datetime',
floor: Date.UTC(2014, 9, 1),
ceiling: Date.UTC(2015, 12, 1),
dateTimeLabelFormats: {
month: '%b %Y'
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%b %Y', this.value);
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
pointWidth: 34,
groupPadding: 0
}
},
series: [{
type: 'columnrange',
grouping: false,
pointPadding: 0,
name: 'Phase 1- Vorbereitung',
data: [
["some test text ", Date.UTC(2014, 9, 1), Date.UTC(2014, 12, 1)],
["some test text ", Date.UTC(2014, 11, 1), Date.UTC(2015, 2, 1)],
["some test text ", Date.UTC(2014, 10, 1), Date.UTC(2014, 12, 15) ],
["some test text ", Date.UTC(2014, 12, 16), Date.UTC(2015, 1, 15)],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null]
],
tooltip: {
headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
}},
{
type: 'columnrange',
name: 'Phase 2 - Teilnahmewettbewerb',
grouping: false,
pointPadding: 0,
data: [
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
["some test text ", Date.UTC(2015, 1, 16), Date.UTC(2015, 2, 15)],
["some test text ", Date.UTC(2015, 1, 16), Date.UTC(2015, 2, 15)],
["some test text ", Date.UTC(2015, 2, 16), Date.UTC(2015, 3, 15)],
["some test text ", Date.UTC(2015, 3, 1), Date.UTC(2015, 3, 15)],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null]
],
tooltip: {
headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
}},
{
type: 'columnrange',
name: 'Phase 3 - Angebotsphase',
grouping: false,
pointPadding: 0,
data: [
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
["some test text ", Date.UTC(2014, 10, 1), Date.UTC(2015, 2, 1)],
["some test text ", Date.UTC(2015, 2, 1), Date.UTC(2015, 3, 15)],
["some test text ", Date.UTC(2015, 3, 16), Date.UTC(2015, 4, 1)],
["some test text ", Date.UTC(2015, 4, 16), Date.UTC(2015, 5, 15)],
[null, null, null],
[null, null, null],
[null, null, null]
],
tooltip: {
headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
}},
{
type: 'columnrange',
name: 'Phase 4 - Vergabeentscheidung',
grouping: false,
pointPadding: 0,
data: [
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
[null, null, null],
["some test text ", Date.UTC(2015, 5, 1), Date.UTC(2015, 5, 15)],
["some test text ", Date.UTC(2015, 4, 16), Date.UTC(2015, 6, 1)],
["some test text ", Date.UTC(2015, 5, 16), Date.UTC(2015, 6, 15)]
],
tooltip: {
headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
}},
{
type: 'scatter',
name: 'Meilensteine',
color: 'gold',
marker: {
symbol: 'diamond',
radius: 10
},
grouping: false,
pointPadding: 0,
data: [
{y: Date.UTC(2014, 9, 1), value: "M1 Projektstart"},
{y: Date.UTC(2014, 12, 15), value:"M2.1 Finalisierung Dokumente TN-Wettbewerb"},
{y: Date.UTC(2015, 1, 1), value:"M3.1"},
{y: Date.UTC(2015, 1, 15), value:"M2"},
{y: Date.UTC(2015, 2, 15), value:"M5"},
{y: Date.UTC(2015, 3, 1), value:"M3"},
{y: Date.UTC(2015, 3, 16), value:"M4"},
{y: Date.UTC(2015, 4, 1), value:"M5.1"},
{y: Date.UTC(2015, 3, 1), value:"M5"},
{y: Date.UTC(2015, 4, 1), value:"M7"},
{y: Date.UTC(2015, 5, 1), value:"M8"}
],
tooltip: {
formatter: function() {
//return alert(this);
return 'dump stuff not working';
//return 'The value for <b>' + this.y + '</b> is <b>' + this.value + '</b>, in series '+ this.series.name;
}
}}
],
exporting: {
sourceWidth: 2000,
sourceHeight: 1200
}
});
});
</script> PawełFus
1）没有这样的选项series.tooltip.formatter。仅限series.tooltip.pointFormat或其他格式。例如：
tooltip: {
pointFormat: "{point.value}"
}
示例：http：//jsfiddle.net/TFhd7/367/
2）我认为这与Highcharts 2.x和4.x之间的设计更改有关。在此票证中查看更多。设置labels.x为-5以下示例：http : //jsfiddle.net/TFhd7/368/
关于背景-插件不支持该背景，您需要自己渲染该背景。我建议使用chart.renderer。参见API。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
UITableView的项目向下滚动后更改颜色，然后快速备份
- 2
Linux的官方Adobe Flash存储库是否已过时？
- 3
用日期数据透视表和日期顺序查询
- 4
应用发明者仅从列表中选择一个随机项一次
- 5
Mac OS X更新后的GRUB 2问题
- 6
验证REST API参数
- 7
Java Eclipse中的错误13，如何解决？
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
ggplot：对齐多个分面图-所有大小不同的分面
- 10
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 11
如何从视图一次更新多行（ASP.NET - Core）
- 12
计算数据帧中每行的NA
- 13
蓝屏死机没有修复解决方案
- 14
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 15
离子动态工具栏背景色
- 16
VB.net将2条特定行导出到DataGridView
- 17
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 18
在Windows 7中无法删除文件（2）
- 19
python中的boto3文件上传
- 20
当我尝试下载 StanfordNLP en 模型时，出现错误
- 21
Node.js中未捕获的异常错误，发生调用
我来说两句