Question

我有两行日期数据。一行每天依次绘制一个点。另一条线绘制了前一行中某一天的非后续点。

问题在于，当我这样做时，十字准线功能表现得很奇怪。请参阅下面链接的示例。您会注意到虽然工具提示和点突出显示正确的点，但十字准线会沿着x轴卡在非连续点上，即使这不是鼠标在图表上的当前位置。例外情况是将鼠标悬停在线上。然后十字准线正确地跟随鼠标。

请参阅此处的示例：http://jsfiddle.net/2H9m3/1/

$(function () {
    $('#container').highcharts({
        tooltip: {
            shared: true,
            crosshairs: true
        },
        xAxis: {
            type: "datetime", maxPadding: 0, minPadding: 0
        },
        yAxis: {
            min: 0
        },
        series: [{
            name: 'Line',
            data: GenerateData(10, 50)
        }, {
            name: "Events",
            color: "#EF4B68",
            lineWidth: 0,
            marker: {
                enabled: true,
                symbol: "triangle",
                radius: 6
            },
            data: [
                [5 * 86400000, 0],
                [21 * 86400000, 0]
            ]
        }]
    });
});

function GenerateData(min, max) {
    var data = [];

    for (i = 0; i < (30 * 86400000); i = i + 86400000) {
        data.push([i, GetRandomInt(min, max)]);
    }

    return data;
}

function GetRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

我不确定这是一个错误还是我做错了什么。

Answer 1

这里的问题很微妙。这实际上是由于tooltip链接在最顶层的系列中。由于您首先创建线性系列，然后是非连续系列，最顶级系列是2分。因此，为了重新获得“工具提示”和你的十字准线，你必须更接近非顺序系列背后的系列。

修正：

将非连续系列作为您添加的第一个系列。
为您想要的顶级系列提供一个索引值，该索引值大于最小系列。

我选择了选项2：

 series: [{
            name: 'Line',
            index: 1,
            data: GenerateData(10, 50)
        }, {
            name: "Events",
            index: 0,
            color: "#EF4B68",
            lineWidth: 0,
            marker: {
                enabled: true,
                symbol: "triangle",
                radius: 6
            },
            data: [
                [5 * 86400000, 0],
                [21 * 86400000, 0]
            ]
        }]

示例here。

Answer 2

看起来像新的十字线核心中的一个错误。

向开发者报告：https://github.com/highslide-software/highcharts.com/issues/2816

谢谢！

共享十字准线突出显示/ w非连续系列

2 个答案: