Question

我在图表中绘制了两条静态线以指示高和低范围。我可以为该行保留标签，但不能为静态行保留工具提示。有什么办法可以做到吗？

yAxis: {
  plotLines: [{
    value: 70,
    width: 1,
    color: '#68AF46'
    label: {
      style: {
        color: '#FE7246',
        fontWeight: 'bold'
      },
      text: '70',
      align: 'right',
      x: -10,
      y: 16
    },
  },
  {
    value: 180,
    width: 1,
    color: '#FE7246',
    label: {
      text: '180',
      align: 'right',
      style: {
        color: '#FE7246',
        fontWeight: 'bold'
      },
    },
  }]
}

我发现没有属性可保留绘图线的工具提示。请帮帮我

Answer 1

我认为Highcharts默认不存在此功能，但是您可以通过侦听mouseover上的plotLine事件并手动创建工具提示来创建它。然后，在mouseout上，关闭工具提示。

下面是一个示例图，其上有y = 50的工具提示：

Highcharts.chart('container', {
  chart: {
    styledMode: true
  },
  title: {
    text: 'Tooltip On PlotLine'
  },
  yAxis: {
    plotLines: [{
      value: 50,
      width: 1,
      color: '#68AF46',
      label: {
        style: {
          color: '#FE7246',
          fontWeight: 'bold'
        },
        text: '50',
        align: 'right',
        x: -10,
        y: 16
      },
      events: {
        mouseover: function(e) {
          var series = this.axis.series[0];
          var chart = series.chart;
          var PointClass = series.pointClass;
          var tooltip = chart.tooltip;
          var point = (new PointClass()).init(
              series, ['PlotLine', this.options.value]
            );
          var normalizedEvent = chart.pointer.normalize(e);

          point.tooltipPos = [
            normalizedEvent.chartX - chart.plotLeft,
            normalizedEvent.chartY - chart.plotTop
          ];

          tooltip.refresh(point);
        },
        mouseout: function(e) {
          this.axis.chart.tooltip.hide();
        }
      }
    }, ]
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  series: [{
    data: [10, 30, 20, 60, 80]
  }]
});

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	margin: 0 auto;
}

.highcharts-tooltip-box {
	fill: black;
	fill-opacity: 0.6;
	stroke-width: 0;
}

.highcharts-tooltip text {
	fill: white;
	text-shadow: 0 0 3px black;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Answer 2

您还可以添加两个其他虚拟序列并将其隐藏在绘图线下：

series: [{
    data: [1, 50, 100, 200]
}, {
    data: [70, 70, 70, 70],
    showInLegend: false,
    lineWidth: 0.5,
    color: 'transparent',
    marker: {
        radius: 0
    },
    tooltip: {
        pointFormat: 'plotLine1'
    }
}, {
    data: [180, 180, 180, 180],
    showInLegend: false,
    color: 'transparent',
    marker: {
        radius: 0
    },
    tooltip: {
        pointFormat: 'plotLine2'
    }
}]

实时演示： http://jsfiddle.net/BlackLabel/2Ln05yes/

API参考： https://api.highcharts.com/highcharts/series.line.tooltip

y轴上静态绘图线的工具提示

2 个答案: