悬停选择错误的线标记

时间:2017-05-15 00:00:44

标签: highcharts rendering

我有一个使用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分。

0 个答案:

没有答案