我生成一个带有图表的工具提示。
tooltip: {
borderRadius: 15,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
useHTML: true,
shared: true,
formatter: function() {
var div = document.createElement('div');
Highcharts.chart(div, {
chart: {
height: 300,
width: 300
},
title: {
text: 'Title'
},
series: [
{
data: [10, 20],
color: 'red'
},
{
data: [20, 10],
color: 'green'
}
],
yAxis: {
title: {
text: 'Quantity'
}
}
});
return div.innerHTML;
}
}
真实数据示例
主图表为
line
类型。工具提示图表为column
类型。虚拟数据示例
主图表为
line
类型。工具提示图也属于line
类型。您可能会看到半可见的红色和绿色符号。它们要么被某种东西隐藏(我试图弄清楚它是什么),要么突然停止渲染(我对此表示高度怀疑)。您有什么想法吗?
更新1
我能够确定该系列渲染到的元素。在那里,大小似乎正确,已经渲染了点。
<g class="highcharts-series-group" data-z-index="3">...</g>
不过,我无法将其放在最前面,也无法通过任何CSS手段使其可见。
基本上这就是问题。如何使其前进或后退?
更新2
我正在尝试同时设置尺寸
div.style.width = "500px";
和
chart: {
height: 300,
width: 300
}
无济于事。
更新3
I created a jsfiddle. Please, have a look.
你有什么想法?任何想法都是无价的。
最佳答案
解决此问题的方法非常简单。在格式化程序回调函数中,您将返回带有已创建图表的div的innerHTML。但是,这不是交互式图表,而只是HTML。
图表图区域由于动画而被隐藏。禁用它,您将看到绘制的系列:
plotOptions: {
series: {
animation: false
}
}
演示:
https://jsfiddle.net/BlackLabel/us4dvgy9/
另一种解决方案是在工具提示格式化程序中返回HTML div元素,然后使用setTimeout在div内创建图表。通过这种方法,动画效果很好。
码:
formatter: function() {
setTimeout(function() {
Highcharts.chart('tooltip', {
chart: {
width: 200,
height: 200,
type: 'column'
},
title: {
text: 'Title'
},
credits: {
enabled: false
},
series: [{
data: [50, 75],
color: 'red',
selected: true
}, {
data: [10, 100],
color: 'green'
}],
yAxis: {
title: {
text: 'Quantity'
}
}
});
}, 0);
return '<div id="tooltip"></div>';
}
演示:
https://jsfiddle.net/BlackLabel/rh6pw5s2/
关于javascript - 工具提示中的图表未完全呈现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57508282/