Question

我想在HighCharts中单击鼠标时在ToolTip中显示多个项目。我想仅在鼠标单击期间显示工具提示而不是悬停，因此我在ToolTip属性中使用enabled:false和shared: true。工具提示中有5个项目显示。前3个项目是＆＃34;列＆＃34;其余2项是＆＃34; line＆＃34;类型。

这里的问题是在第一次点击期间searchPoint(event,true)未定义列类型的项目，但订单项工作正常。第一次点击后，一切正常。

任何人都可以帮助我吗？

我提供了以下使用过的代码。

function GenerateChartPulledUnit(title, ctrl, CountText, NonQty, PulledQty, ScannedQty, MaxDefect, ActualDPU) 
{
if (CountText.length > 0) {
    $("#divChartPulled" + ctrl).show();
    $("#divNoDataPulled" + ctrl).hide();
    $("#divNoDataHeaderPulled" + ctrl).hide();
    $('#divPulled' + ctrl + '').highcharts({
        chart: {
            spacingLeft: 64,
            events: {
                load: function () {
                    //debugger;
                    this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                },
            }
        },

        title: {
            text: title
        },
        xAxis: {
            categories: CountText,
        },
        tooltip: {

            enabled:false,
            shared: true,
            formatter: function () {
                debugger;
                var tt = this.y + this.x;
            }

        },
        plotOptions: {
            column: {
                stacking: 'normal',
            },
            spline: {

            },
            series: {
                stickyTracking: false,
                events: {
                    click: function (evt) {
                        debugger;
                        var points = [];
                        var sample=[];

                        var points = this.chart.series.map(function (d,index) {

                           return d.chart.series[index].searchPoint(evt, true);

                        });

                        if (Unitteamcount == 0) {
                            SelUnitTeam = evt.point.category;
                            this.chart.myTooltip.refresh(points, evt);
                            Unitteamcount = 1;
                        }
                        else if (SelUnitTeam != evt.point.category) {
                            this.chart.myTooltip.refresh(points, evt);
                            SelUnitTeam = evt.point.category;
                        }
                        else {
                            this.chart.myTooltip.hide();
                            Unitteamcount = 0;
                        }

                    }



                }

            }
        },

        yAxis: [{ // Secondary yAxis           
            labels: {
                format: '{value}',
            },
            title: null,
        }, { // Primary yAxis
            labels: {
                format: '{value}%',
            },
            opposite: true,
            title: null,
        }, ],

        legend: {
            align: 'center',
            verticalAlign: 'top',
            y: 30,
        },
        series: [{
            name: 'Non-Negotiable Qty',
            type: 'column',

            color: "#eccf18",
            data: NonQty
        }, {
            name: 'Pulled Qty',
            type: 'column',
            color: "#ff0000",
            data: PulledQty
        }, {
            name: 'Scanned Qty',
            type: 'column',
            color: "#ffa238",
            data: ScannedQty
        }
        , {
            name: 'Max.Tolerable Defect',
            type: 'line',
            yAxis: 1,
            color: "#0d9149",
            data: MaxDefect,
            marker: {
                enabled: false,
            },
            tooltip: {
                valueSuffix: ' %'
            }

        }, {
            name: 'Actual DPU %',
            type: 'line',
            yAxis: 1,
            color: "#00b0f0",
            marker: {
                fillColor: 'red',
                symbol: 'circle'
            },
            data: ActualDPU,
            tooltip: {
                valueSuffix: ' %'
            }
        }
        ]
    });
}
else {
    $("#divChartPulled" + ctrl).hide();
    $("#divNoDataPulled" + ctrl).show();
    $("#divNoDataHeaderPulled" + ctrl).show();
}
}

Answer 1

我的解决方案相当糟糕。

将您的系列选项kdNow设置为true
（我刚刚在点击事件回调中添加了一行）

var points = this.chart.series.map(function (d,index) {
    d.chart.series[index].options.kdNow = true;
    return d.chart.series[index].searchPoint(evt, true);

});

Here is the associated source code for kdNow

在highcharts中鼠标单击事件期间的共享工具提示错误

1 个答案: