Question

我正在使用Gantt chart来创建数据可视化。在我的example中，当我将鼠标悬停在任意点上时，工具提示的向下箭头不指向我指向的点，而是指向空白区域。有没有办法在鼠标指针附近正确显示工具提示？

图表选项

{
    chart: {
        type: 'xrange',
        renderTo: 'chart',
        height: 600,
        zoomType: 'xy',
        resetZoomButton: {
            theme: {
                fill: 'white',
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#41739D',
                        style: {
                            color: 'white'
                        }
                    }
                }
            }
        },
        events: {
            load: function(e) {
                var max = maxDate;
                var range = (24 * 3600 * 1000) * 7; // one day * 7
                this.xAxis[0].setExtremes(max - range, max);
                //resetMin = (max - range);
                //resetMax = max;
            },
            selection: function(event) {
                if (event.xAxis) {
                    console.log('min: ' + event.xAxis[0].min + ', max: ' + event.xAxis[0].max);
                } else {
                    console.log('Selection reset');
                    this.xAxis[0].setExtremes(resetMin, resetMax);
                    is1stZoom = true;
                    console.log('Reset to min: ' + resetMin + ', max: ' + resetMax);
                }
            },
            redraw: function() {
                var chart = this,
                    each = Highcharts.each;

                each(chart.series, function(s, i) {
                    each(s.points, function(p, j) {
                        if (p.graphic) {
                            p.graphic.css({
                                'stroke-width': 1,
                                'stroke': p.color
                            })
                        }
                    });
                });
            }
        }
    },
    title: {
        text: 'Processes Run'
    },
    xAxis: {
        type: 'datetime',
        tickInterval: xAxisStepping,
        dateTimeLabelFormats: {
            month: '%b %e, %Y'
        },
        min: minDate,
        max: maxDate,
        minRange: 1000,
        events: {
            afterSetExtremes: function(e) {
                if (is1stZoom) {
                    resetMin = e.min;
                    resetMax = e.max;
                    is1stZoom = false;
                    console.log('Should get reset to min: ' + e.min + ', max: ' + e.max);
                }
            }
        }
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false,
        tickInterval: 1,
        gridLineWidth: 1,
        title: '',
        categories: categories,
        min: minY,
        max: maxY,
        labels: {
            enabled: false
        }
    },
    navigator: {
        enabled: true,
        margin: 2
    },
    series: data,
    tooltip: {
        formatter: function() {
            var seriesName = this.series.name;
            return seriesName;
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            animation: false,
            turboThreshold: 100000000,
            dataGrouping: {
                enabled: false
            }
        }
    }
}

Answer 1

更新 Your updated fiddle with new positioning of tooltip

如果你想相应地定位你的工具提示，你正在使用翻译稍微移动你的点数：使用工具提示中的定位器功能如下（作为一个例子，根据你的坐标设置进行修改）：

      positioner: function(labelWidth, labelHeight, point) {         
                         var tooltipX, tooltipY;
                            if (point.plotX + labelWidth > this.chart.plotWidth) {
                                tooltipX = point.plotX + this.chart.plotLeft - labelWidth - 40;
                            } else {
                                tooltipX = point.plotX + this.chart.plotLeft + 40;
                            }
                            tooltipY = point.plotY + this.chart.plotTop - 20;
                            return {
                                x: tooltipX,
                                y: tooltipY
                            };       
                    }

Answer 2

tooltipPos似乎有问题，简单修复：http://jsfiddle.net/20kt84vo/3/

代码：

      point.tooltipPos[0] = point.plotX + barWidth / 2;

工具提示在Highcharts ganttchart中无法正确显示

2 个答案: