1

我们正在尝试做的是：

  • 仅当可见系列数 > 1 时才显示十字准线（颜色：黑色）
  • 否则禁用十字准线或将颜色设置为透明

以下是我们的问题：

  • 与可见系列的数量无关，第一次悬停时不显示十字准线（但对于所有后续悬停）
  • 我们的主要问题是颜色没有改变，尽管由于可见系列的数量，console.log 显示颜色设置正确

请看小提琴：例子

感谢您的建议！

$(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]
    }]
});
});
4

2 回答 2

3

不要实时添加十字准线，而是在图表初始化时启用十字准线，然后通过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)'
    },
于 2013-10-25T11:21:35.053 回答
0

在我看来，工具提示代码是尝试此操作的错误位置。我会使用系列 hide 和 show 事件处理程序来检测显示了多少系列（一个简单的计数器，它会在 show 中增加，在 hide 中减少）。

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

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

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

于 2013-10-25T10:31:26.427 回答