Question

我们要做的是：

仅当可见系列的数量>时显示十字准线。 1（颜色：黑色）
否则禁用十字准线或者设置颜色透明

以下是我们的问题：

独立于第一个悬停时未显示十字准线的可见系列数（但对于所有后续悬停）
我们的主要问题是颜色没有变化，尽管console.log显示由于可见系列的数量而正确设置了颜色

请看小提琴：example

感谢您的建议！

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        type: 'area',
        renderTo: 'container'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 1000;
            }
        }
    },
    tooltip: {
        formatter: function () {

            // show crosshairs only if visible series >1, else transparent
            var nVisible = 0;
            for (var i = 0; i < chart.series.length; i++) {
                if (chart.series[i].visible) {
                    nVisible++;
                };
                if (nVisible > 1) {
                    break;
                };
            };

            if (nVisible > 1) {
                chart.options.tooltip.crosshairs = {
                    width: 1.5,
                    dashStyle: 'solid',
                    color: 'black'
                };
            } else {
                chart.options.tooltip.crosshairs = {
                    color: 'transparent'
                };

            };
            console.log(chart.options.tooltip.crosshairs.color);
            return this.y + ' Billions';
        },
        backgroundColor: 'rgba(255,255,255,0.95)'
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
});
});

Answer 1

不要实时添加十字准线，而是在初始化图表时启用十字准线，然后通过attr()更新来管理颜色。例如：http://jsfiddle.net/D5DME/3/

代码：

    tooltip: {
        crosshairs: [{
            width: 1.5,
            dashStyle: 'solid',
            color: 'black'
        }, false],
        formatter: function () {

            // show crosshairs only if visible series >1, else transparent
            var nVisible = 0;
            for (var i = 0; i < this.series.chart.series.length; i++) {
                if (this.series.chart.series[i].visible) {
                    nVisible++;
                };
            };

            if(this.series.chart.tooltip.crosshairs[0]) {
                if (nVisible > 1) {
                    this.series.chart.tooltip.crosshairs[0].attr({
                        stroke: 'black'
                    });
                } else {
                    this.series.chart.tooltip.crosshairs[0].attr({
                        stroke: 'rgba(0,0,0,0)'
                    });
                }
            }
            return this.y + ' Billions';
        },
        backgroundColor: 'rgba(255,255,255,0.95)'
    },

Answer 2

在我看来，工具提示代码是错误的尝试。我会使用系列隐藏和显示事件处理程序来检测显示的系列数量（一个简单的计数器，它在show中递增，而hide中的递减将起作用）。

http://api.highcharts.com/highstock#plotOptions.series.events.hide

您可以根据计数尝试图表设置选项。

但是，我不确定只是设置chart.options.tootlip。将以您想要的方式动态工作。

Highcharts通过可见系列的数量改变十字准线颜色

2 个答案: