我遇到了一个问题，我不确定这是 highcharts 插件中的错误还是编程错误。
我正在使用空值绘制一个只有一个系列的断开连接的线图，但这似乎是悬停标记的问题:其中一些(在第一行的顶部和第二行的底部)似乎只是没出现。代码很简单，但我找不到导致这种情况的原因。
这是一个重现问题的例子:http://jsfiddle.net/KYXQS/9/ (2002 年 26 月更新)
这里是代码(2002 年 26 月更新):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
zoomType: 'xy'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
plotOptions :
{
line : {
marker :
{
enabled: false,
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Red',
data: [[0,0],[1,1],[2,2]
,null
,[4,4],[5,5],[6,6]
,null
,[2,0],[3,1],[4,2]
,null
,[6,4],[7,5],[8,6]
,null
,[12,0],[13,1],[14,2]
,null
,[16,4],[17,5],[18,6]
,null
,[22,0],[23,1],[24,2]
,null
,[26,4],[27,5],[28,6]
,null
,[32,0],[33,1],[34,2]
,null
,[36,4],[37,5],[38,6]
,null
,[34,0],[35,1],[36,2]
,null
,[38,4],[39,5],[40,6]
,null
,[36,0],[37,1],[38,2]
,null
,[40,4],[41,5],[42,6]
,null
,[40,2],[41,2],[42,3]
,null
,[47,8],[48,10],[49,11]
],
color: 'red'
}
,{
name: 'Blue',
data: [[2,2],[3,3],[4,4]
,null
,[8,8],[9,10],[10,12]
,null
,[4,2],[5,3],[6,4]
,null
,[10,8],[11,10],[12,12]
,null
,[14,2],[15,3],[16,4]
,null
,[20,8],[21,10],[22,12]
,null
,[24,2],[25,3],[26,4]
,null
,[30,8],[31,10],[32,12]
,null
,[34,2],[35,3],[36,4]
,null
,[40,8],[41,10],[42,12]
,null
,[36,2],[37,3],[38,4]
,null
,[42,8],[43,10],[44,12]
,null
,[38,2],[39,3],[40,4]
,null
,[44,8],[45,10],[46,12]
,null
,[42,3],[41,3],[42,4]
,null
,[49,11],[52,12],[53,12]
],
color: 'blue'
}
,{
name: 'Green',
data: [[6,6],[7,7],[8,8]
,null
,[10,12],[11,15],[12,19]
,null
,[8,6],[9,7],[10,8]
,null
,[12,12],[13,15],[14,19]
,null
,[8,6],[9,7],[10,8]
,null
,[12,12],[13,15],[14,19]
,null
,[18,6],[19,7],[20,8]
,null
,[22,12],[23,15],[24,19]
,null
,[28,6],[29,7],[30,8]
,null
,[32,12],[33,15],[34,19]
,null
,[38,6],[39,7],[40,8]
,null
,[42,12],[43,15],[44,19]
,null
,[40,6],[41,7],[42,8]
,null
,[44,12],[45,15],[46,19]
,null
,[42,6],[43,7],[44,8]
,null
,[46,12],[47,15],[48,19]
,null
,[42,4],[45,5],[47,8]
,null
,[53,12],[54,13],[55,14]
],
color: 'green'
}]
});
});
});
关于如何使这些标记重新出现的任何想法？
提前致谢。
26 月 2 日更新:
我一直在测试其他场景以确定此问题的原因，这是我发现的:
- 当线彼此太靠近(在 xAxis 上)时会出现问题
- 缩放没有帮助，即使在标记应该出现的地方完全缩放也不会使其出现。
- 无论 y 值是否相同，都会出现问题
25/04 更新: 例如，您可以在尝试将点悬停在绿色系列的 [47,15] 时看到错误。而不是 [47,15] 点，而是 [47,8] 点是“悬停”的，无论我尝试什么(比如精确缩放它)我都不能“悬停” [47,15] 点。
我已经用更多示例更新了 jsfiddle 链接和上面的代码来说明问题。
有人知道如何解决这个问题吗？
最佳答案
问题是，在 Highcharts 中，一个系列的数据应该按 xAxis 升序排序，而您的系列则不是。对您的数据进行排序，应该可以正常工作。
关于javascript - 断开连接的图表上缺少悬停标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15069809/