2

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

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'
      },
    },
  }]
}

我发现没有属性可以保留情节线的工具提示。

4

2 回答 2

2

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

这是一个带有 y = 50 上工具提示的 plotLine 的示例：

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>

于 2019-10-22T10:10:23.033 回答
0

您还可以添加两个额外的虚拟系列并将它们隐藏在情节线下：

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

于 2019-10-22T10:30:57.043 回答