高级图表工具提示格式化程序函数不显示表正确的值。
高级图表工具提示格式化程序函数不显示表正确的值。
提问于 2019-04-24 18:13:00
为了显示来自不同point.series.name的y值，我在高级图表工具提示格式化程序函数中创建了一个if else语句。数组中第一和第二系列中的值显示正确，但对最后一个series.name值的样式设置(后向传播)不显示正确，因为字体大小和point.series.color没有显示。我想问题是表标签？请看小提琴
https://jsfiddle.net/marialaustsen/w4k87jyo/
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
var aYearFromNow = new Date(this.x);
aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5);
var tooltip = '<table><span style="font-size: 16px">' +
Highcharts.dateFormat('%e/%b/%Y', new Date(this.x)) + '-' + Highcharts.dateFormat('%e/%b/%Y', aYearFromNow) + '</span><br/><tbody>';
//loop each point in this.points
$.each(this.points, function(i, point) {
if (point.series.name === 'Observations') {
tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
'<td style="font-size: 14px">' + point.y + '℃' + '</td></tr>'
} else if (point.series.name === 'BOXPLOT') {
const x = this.x;
const currentData = this.series.data.find(data => data.x === x);
const boxplotValues = currentData ? currentData.options : {};
tooltip += `<span style="font-size: 14px; color: #aaeeee">
Max: ${boxplotValues.high.toFixed(2)}<br>
Q3: ${boxplotValues.q3.toFixed(2)}<br>
Median: ${boxplotValues.median.toFixed(2)}<br>
Q1: ${boxplotValues.q1.toFixed(2)}<br>
Low: ${boxplotValues.low.toFixed(2)}<br></span>`;
} else {
tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
'<td style="font-size: 14px">' + point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>' +
'</tbody></table>';
}
});
return tooltip;
}
},回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-24 19:57:41
在最后一个值(后向转换-扩展)之前关闭tbody，一旦放到for循环之外，它就工作了：
...
tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
'<td style="font-size: 14px">' + point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>'
}
});
tooltip += '</tbody></table>';
return tooltip;
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55836215
复制相关文章
相似问题
腾讯云开发者
