时间戳

首页 > 解决方案 > Highstock 工具提示“标签”未呈现

highcharts - Highstock 工具提示“标签”未呈现

问题描述

我正在尝试在 highstock 标志的工具提示中添加锚标记。
我面临着几个问题：

  1. 锚点标签不显示在工具提示中。
  2. 当我尝试将鼠标悬停在工具提示上时，工具提示会消失。

我的代码如下所示： 

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {

  var year = new Date(data[data.length - 1][0]).getFullYear(); // Get year of last data point

  // Create the chart
  Highcharts.stockChart('container', {


    rangeSelector: {
      selected: 4
    },

    title: {
      text: 'USD to EUR exchange rate'
    },

    yAxis: {
      title: {
        text: 'Exchange rate'
      }
    },

    series: [{
      name: 'USD to EUR',
      data: data,
      id: 'dataseries',
      tooltip: {
        valueDecimals: 4
      }
    },{
      type: 'flags',
      data: [{
        x: Date.UTC(year, 11, 1),
        title: 'B',
        text: 'make me clickable'
      }, {
        x: Date.UTC(year, 11, 1),
        title: 'B',
        text: '<a>make me clickable</a>'
      }],
      shape: 'circlepin',
      onSeries: 'dataseries',
      width: 16,
      tooltip: {                          
                          pointFormat: '<a href="#">{point.text}</a>'
                      }       ,
      style:{
        border:'1px solid green'
      }
    }]
  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>


我究竟做错了什么？

标签： highcharts

解决方案

您必须为工具提示设置useHTML为true。为了更容易悬停在工具提示上，增加hideDelay值并禁用stickyTracking系列：

    tooltip: {
        useHTML: true,
        hideDelay: 5000
    }

现场演示：http: //jsfiddle.net/BlackLabel/ncrgwvzu/

接口：

https://api.highcharts.com/highstock/series.line.stickyTracking

https://api.highcharts.com/highstock/tooltip.useHTML

推荐阅读