我有一个使用Highcharts的图表,它有一个列范围和一个覆盖列范围的系列。这是为了显示高/低&平均温度。
当您将鼠标悬停在范围图表上(但不是平均标记)时,有时可以从另一列中选择平均温度,并突出显示错误的标记。如果您实际将鼠标悬停在线标记上,则会在工具提示中显示该列的正确数据,并突出显示正确的标记。
如果您将鼠标悬停在1974年以上,然后在平均标记上方向上/向下移动,则以下小提示会显示此行为。
https://jsfiddle.net/5u7q0Lzt/
var i = Highcharts.chart('container', {
chart: {
type: 'columnrange',
// inverted: true
},
title: {
text: ""
},
plotOptions: {
columnrange: {
dataLabels: {
color: 'silver',
enabled: true,
className : 'smallLabel',
formatter: function () {
return parseInt(this.y) + '°';
}
}
}
},
series: [
{
name: 'Temperatures',
//pointWidth: 20,
data: [[3.3,20.2],[7.2,11.1],[-1.1,15.7],[0.6,14.4],[10.6,20.0],[5.0,18.0],[7.0,12.0],[3.0,14.0],[6.0,21.0],[3.0,15.0],[9.0,17.0],[10.0,11.0],[4.0,14.0],[2.0,13.0],[0.0,12.0],[4.2,12.0],[2.3,15.1],[1.3,15.1],[4.5,8.3],[2.8,17.0],[2.9,17.9],[2.4,19.5],[9.2,13.2],[1.0,15.0],[-0.2,17.8],[1.0,8.4],[3.0,15.2],[2.0,12.0],[11.0,19.0],[3.0,19.0],[0.0,13.0],[3.0,12.0],[14.0,21.0],[7.0,19.0],[6.0,11.0],[-1.0,13.0],[3.0,13.0],[4.0,9.0],[7.0,12.0],[-1.0,9.0],[2.0,20.0],[-1.0,15.0],[6.0,19.0],[9.0,15.0],[2.0,13.0],[6.0,14.0],[6.0,16.0],[-2.0,12.0],[8.0,11.0],[12.0,20.0]]
},
{
name : "Average",
type: 'line',
lineWidth: 1,
states: {
hover: {
lineWidthPlus: 0
}
},
marker: {
enabled: true,
radius: 5
},
data: [7.5,9.1,9.8,3.7,11.7,10.3,9.8,8.7,14.2,8.8,13.0,10.3,8.2,6.7,5.6,7.3,11.9,6.9,6.5,8.2,9.9,9.6,10.4,7.2,9.9,4.8,8.9,6.8,15.8,11.4,6.3,7.9,17.6,11.5,7.7,7.1,8.2,6.5,9.4,4.6,10.7,5.2,12.1,10.8,8.9,8.6,11.2,5.0,9.9,15.1],
color: 'navy'
}],
valueAxis: {
labels: {
format: "{0}"
}
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
xAxis: {
labels: {
step: 3
},
categories: [1964,1965,1966,1967,1968,1969,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016]
},
credits: { enabled : false },
legend: {
enabled: false
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C',
useHTML: true,
formatter: function() {
points = this.points;// || Highcharts.splat(this);
return "<b>"+this.x+"</b> had a " + 'range of ' + points[0].point.low + '° to ' + points[0].point.high+"°C with an average of " + points[1].y + "°";
}
},
transitions: true,
});
这是Highcharts中的错误还是我错误做的事情?到目前为止我看不出任何错误。两个系列都有50分。