javascript - Highcharts 甘特图工具提示鼠标悬停跟踪问题

Question

默认情况下，Highcharts 中的鼠标悬停跟踪会跟踪到 x 轴上最近的点。这对于其他类型的图表效果很好，但是对于我的甘特图[http://jsfiddle.net/2xkfm87e/11/ ]，这会给最终用户带来不直观的结果。在下面的示例图像中，请注意光标最接近第一个类别 8 段。但是，类别 4 段的点 1 是 x 轴上最近的点，这是渲染的工具提示。我需要将跟踪集中在 y 轴上，这样如果光标最接近 y 轴上的点，就会渲染该工具提示。

这可能吗？感谢您的帮助!

  $(function () {
        // Define tasks
        var tasks = [{
            name: 'Category 1',
            intervals: []
        }, {
            name: 'Category 2',
            intervals: [{ // From-To pairs
                from: Date.UTC(2010,5, 21),
                to: Date.UTC(2015, 5, 21),
                label: 'Category 2',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 3',
            intervals: [{ // From-To pairs
                from: Date.UTC(2011,05,16),
                to: Date.UTC(2012,03,21 ),
                label: 'Category 3',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2013,07,09),
                to: Date.UTC(2015,05,22),
                label: 'Category 3',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 4',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,07,18 ),
                to: Date.UTC(2015,05,22),
                label: 'Category 4',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 5',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 5',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 5',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 6',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 6',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 6',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 7',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 7',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 7',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 8',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 8',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 8',
                tooltip_data: 'this data'
            }]
        }, {
            name: 'Category 9',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 9',
                tooltip_data: 'this data'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 9',
                tooltip_data: 'this data'
            }]
        }];

        // re-structure the tasks into line seriesvar series = [];
        var series = [];
        $.each(tasks.reverse(), function(i, task) {
            var item = {
                name: task.name,
                data: []
            };
            $.each(task.intervals, function(j, interval) {
                item.data.push({
                    x: interval.from,
                    y: i,
                    label: interval.label,
                    from: interval.from,
                    to: interval.to,
                    tooltip_data: interval.tooltip_data

                }, {
                    x: interval.to,
                    y: i,
                    from: interval.from,
                    to: interval.to,
                    tooltip_data: interval.tooltip_data
                });

                // add a null value between intervals
                if (task.intervals[j + 1]) {
                    item.data.push(
                        [(interval.to + task.intervals[j + 1].from) / 2, null]
                    );
                }

            });

            series.push(item);
        });

        // restructure the milestones
        /*$.each(milestones, function(i, milestone) {
            var item = Highcharts.extend(milestone, {
                data: [[
                    milestone.time,
                    milestone.task
                ]],
                type: 'scatter'
            });
            series.push(item);
        });
            */

        // create the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'Category History'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                min:0,
                max:8,
                categories: ['Category 9',
                             'Category 8',
                             'Category 7',
                             'Category 6',
                             'Category 5',
                             'Category 4',
                             'Category 3',
                             'Category 2',
                             'Category 1'],
                tickInterval: 1,            
                tickPixelInterval: 200,
                labels: {
                    style: {
                        color: '#525151',
                        font: '12px Helvetica',
                        fontWeight: 'bold'
                    }
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Criteria'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                   fontSize:'15px'

            },

            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ tasks[this.y].name + '</b><br/>'+this.point.options.tooltip_data +'<br>' +
                        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                        ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                }
            },

            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: false
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    }
                }
            },

            series: series

        });        

  console.log(series);

   });

Answer 1

它应该已经固定在主分支上:http://jsfiddle.net/2xkfm87e/14/

修复将包含在下一个版本中。分支 CDN 的 URL:

<script src="http://github.highcharts.com/highstock.js"></script>