Question

当鼠标悬停在标题上时，我已经创建了一个自定义工具提示（白色背景，黑色文本）。

我使用chart.renderer.text和图表的中心位置在事件上创建加载函数。但是我希望我的工具提示在“鼠标悬停”标题时跟随鼠标，同样在图表中的点上带有highcharts工具提示。

由于highcharts标题是一个span元素而不是一个数据点，因此我不能使用工具提示默认功能。如何将工具提示定位到标题跨度元素？请参阅小提琴：

https://jsfiddle.net/marialaustsen/w4k87jyo/

var ranges = [
    [-315622800000, -0.2408609, -0.1937498],
    [-284000400000, -0.2066399, -0.1349633],
    [-252400303000, -0.2413356, -0.1261202],
    [-220864303000, -0.3176987, -0.1810053],
    [-189328303000, -0.4309874, -0.2753718],
    [-157705903000, -0.2806764, -0.13673],
    [-126169903000, -0.2479743, -0.1690026],
    [-94633903000, -0.2753191, -0.1816201],
    [-63097903000, -0.1408235, -0.08435556],
    [-31475503000, -0.2512668, -0.1149224],
    [31596497000, -0.2825769, -0.148437],
    [63132497000, -0.2823197, -0.2037938],
    [94754897000, -0.09643359, 0.03295682],
    [126290897000, -0.281654, -0.2110296],
    [157826897000, -0.3120279, -0.2342878],
    [189362897000, -0.294176, -0.1824594],
    [220985297000, -0.1799132, -0.09212867],
    [252521297000, -0.01628482, 0.08050994],
    [284057297000, -0.08310624, 0.026883],
    [315593297000, -0.06155353, 0.01404597],
    [347215697000, -0.05226778, 0.09032121],
    [378751697000, -0.1971111, -0.06158315],
    [410287697000, -0.1459778, -0.02733667],
    [441823697000, -0.197513, -0.1444241],
    [473446097000, -0.1752219, -0.004927497],
    [504982097000, -0.06020115, 0.04069498],
    [536518097000, 0.02077712, 0.1431516],
    [568054097000, 0.01049873, 0.1441043],
    [599676497000, -0.06178449, 0.02140319],
    [631212497000, 0.1006601, 0.16657],
    [662748497000, 0.1378711, 0.2378923],
    [694220400000, -0.07528869, 0.05768261],
    [725842800000, -0.1404296, 0.03590908],
    [757378800000, -0.05985879, 0.0664241],
    [788914800000, 0.1580115, 0.2895567],
    [820450800000, 0.01749986, 0.113983],
    [852073200000, 0.05137634, 0.139564],
    [883609200000, 0.3796172, 0.4717335],
    [915145200000, 0.05874969, 0.1611843],
    [946681200000, 0.07699493, 0.1700459],
    [978303600000, 0.09742911, 0.2219135],
    [1009839600000, 0.3231945, 0.4256165],
    [1041375600000, 0.3584458, 0.5381736],
    [1072911600000, 0.3219613, 0.4200903],
    [1104534000000, 0.3028862, 0.4872178],
    [1136070000000, 0.2818642, 0.4433356],
    [1167606000000, 0.2753396, 0.2993396],
    [1199142000000, 0.1016727, 0.1561865],
    [1230764400000, 0.1421884, 0.188136],
    [1262300400000, 0.3960869, 0.4253292],
    [1293836400000, 0.08512741, 0.1863386],
    [1325372400000, 0.1859731, 0.2682165],
    [1356994800000, 0.389729, 0.5635341],
    [1388530800000, 0.287804, 0.4060001],
    [1420066800000, 0.399705, 0.5534601],
    [1451602800000, 0.6159819, 0.6743248],
    [1483225200000, 0.5742405, 0.661474],
    [1514761200000, 0.5399001, 0.6114452]
  ],

  midranges = [
    [-315622800000, -0.2184705, -0.206202],
    [-284000400000, -0.1999558, -0.1942447],
    [-252400303000, -0.162079, -0.1395678],
    [-220864303000, -0.2275385, -0.2023986],
    [-189328303000, -0.3017941, -0.2794814],
    [-157705903000, -0.2674059, -0.2142369],
    [-126169903000, -0.236345, -0.1855258],
    [-94633903000, -0.2423138, -0.1929999],
    [-63097903000, -0.1141278, -0.08552658],
    [-31475503000, -0.2052396, -0.1841571],
    [31596497000, -0.2666847, -0.2537797],
    [63132497000, -0.2455502, -0.2108166],
    [94754897000, -0.08606912, -0.05789221],
    [126290897000, -0.2770694, -0.2230173],
    [157826897000, -0.301831, -0.245429],
    [189362897000, -0.2415157, -0.2263551],
    [220985297000, -0.1445465, -0.1026627],
    [252521297000, -0.002124243, 0.04977401],
    [284057297000, 0.01136355, 0.02368604],
    [315593297000, -0.02714447, -0.009183146],
    [347215697000, -0.03374328, 0.01723201],
    [378751697000, -0.1531832, -0.08042887],
    [410287697000, -0.07963118, -0.03845775],
    [441823697000, -0.17972, -0.1595059],
    [473446097000, -0.1295439, -0.03657699],
    [504982097000, -0.0554782, -0.04038309],
    [536518097000, 0.05867161, 0.1321761],
    [568054097000, 0.04968223, 0.1257274],
    [599676497000, -0.0589936, -0.006304938],
    [631212497000, 0.1388284, 0.1635819],
    [662748497000, 0.152022, 0.2352976],
    [694220400000, -0.03502923, 0.04075381],
    [725842800000, -0.1136759, 0.01325552],
    [757378800000, -0.03579155, 0.03047966],
    [788914800000, 0.1958629, 0.2298041],
    [820450800000, 0.0601462, 0.07727504],
    [852073200000, 0.0573891, 0.1240177],
    [883609200000, 0.3878401, 0.4501741],
    [915145200000, 0.120206, 0.1338366],
    [946681200000, 0.09684783, 0.1409384],
    [978303600000, 0.1417549, 0.2172643],
    [1009839600000, 0.3463299, 0.3858525],
    [1041375600000, 0.4588, 0.4949837],
    [1072911600000, 0.3398826, 0.3961508],
    [1104534000000, 0.3668142, 0.4720009],
    [1136070000000, 0.3217134, 0.3849795],
    [1167606000000, 0.2786052, 0.2919385],
    [1199142000000, 0.1179707, 0.1482561],
    [1230764400000, 0.1554107, 0.1809372],
    [1262300400000, 0.4087261, 0.4249718],
    [1293836400000, 0.1127912, 0.1619051],
    [1325372400000, 0.2240146, 0.2367521],
    [1356994800000, 0.3972811, 0.4682488],
    [1388530800000, 0.329196, 0.3689734],
    [1420066800000, 0.4728232, 0.5235964],
    [1451602800000, 0.6447842, 0.6699023],
    [1483225200000, 0.5991459, 0.6276736],
    [1514761200000, 0.5731335, 0.5976004]
  ],

  observations = [
    [-315622800000, -0.125027967],
    [-284000400000, -0.133224861],
    [-252400303000, -0.197758772],
    [-220864303000, -0.331218885],
    [-189328303000, -0.373631621],
    [-157705903000, -0.226318323],
    [-126169903000, -0.255212388],
    [-94633903000, -0.257971262],
    [-63097903000, -0.081025598],
    [-31475503000, -0.173977982],
    [31596497000, -0.281273127],
    [63132497000, -0.183436095],
    [94754897000, 0.055941514],
    [126290897000, -0.278558516],
    [157826897000, -0.200998486],
    [189362897000, -0.469871227],
    [220985297000, -0.106479309],
    [252521297000, -0.14627142],
    [284057297000, -0.104259949],
    [315593297000, -0.02087272],
    [347215697000, -0.072292756],
    [378751697000, -0.073050476],
    [410287697000, 0.107439219],
    [441823697000, 0.012630117],
    [473446097000, -0.038703932],
    [504982097000, -0.066400826],
    [536518097000, 0.063566479],
    [568054097000, 0.136294049],
    [599676497000, 0.023849885],
    [631212497000, 0.195750464],
    [662748497000, 0.084860468],
    [694220400000, -0.13771961],
    [725842800000, -0.019893232],
    [757378800000, -0.002683881],
    [788914800000, 0.167108316],
    [820450800000, 0.106736819],
    [852073200000, 0.075128975],
    [883609200000, 0.403869158],
    [915145200000, 0.175163852],
    [946681200000, 0.117469801],
    [978303600000, 0.2271733],
    [1009839600000, 0.27220394],
    [1041375600000, 0.413409872],
    [1072911600000, 0.264274741],
    [1104534000000, 0.323817598],
    [1136070000000, 0.347397113],
    [1167606000000, 0.354140463],
    [1199142000000, 0.252877549],
    [1230764400000, 0.341797012],
    [1262300400000, 0.53463092],
    [1293836400000, 0.36467825],
    [1325372400000, 0.159806498],
    [1356994800000, 0.281102946],
    [1388530800000, 0.412804597],
    [1420066800000, 0.475081416],
    [1451602800000, 0.674438445],
    [1483225200000, 0.579642985],
    [1514761200000, 0.317730373]
  ]

$(function() {
  function reloadFlash() {
    $("#flash").fadeIn();
  }

  function hideFlash() {
    $("#flash").fadeOut();
  }

  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
  }, null, document.getElementsByTagName('head')[0]);

  Highcharts.theme = {
    colors: ['#79ea61', '#2b908f', '#F09448', '#6E8CD0', '#aaeeee', '#ff0066',
      '#f45b5b', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#eeaaee'
    ],
    chart: {
      backgroundColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 1
        },
        stops: [
          [0, '#152036'],
          [1, '#1b2a47']
        ]
      },
      style: {
        fontFamily: '\'Unica One\', sans-serif'
      },
      plotBorderColor: '#1b2a47'
    },
    title: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase',
        fontSize: '20px'
      }
    },
    subtitle: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase',
        fontSize: '1.4em'
      }
    },
    xAxis: {
      gridLineColor: '#546c9b',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#546c9b',
      minorGridLineColor: '#546c9b',
      tickColor: '#546c9b',
      title: {
        style: {
          color: '#E0E0E3'

        }
      }
    },
    yAxis: {
      gridLineColor: 'rgba(84, 108, 155, 0.5)',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: 'rgba(84, 108, 155, 0.5)',
      tickWidth: 1,
      title: {
        style: {
          color: '#A0A0A3'
        }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
        color: '#F0F0F0'
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          color: '#E0E0E3'
        },
        marker: {
          lineColor: '#333'
        }
      },
      boxplot: {
        fillColor: '#505053'
      },
      candlestick: {
        lineColor: 'white'
      },
      errorbar: {
        color: 'white'
      }
    },
    legend: {
      itemStyle: {
        color: '#E0E0E3'
      },
      itemHoverStyle: {
        color: '#FFF'
      },
      itemHiddenStyle: {
        color: '#1b2a47'
      }
    },
    credits: {
      style: {
        color: '#E0E0E3'
      }
    },
    labels: {
      style: {
        color: '#E0E0E3'
      }
    },

    drilldown: {
      activeAxisLabelStyle: {
        color: '#F0F0F3'
      },
      activeDataLabelStyle: {
        color: '#F0F0F3'
      }
    },

    navigation: {
      buttonOptions: {
        symbolStroke: '#DDDDDD',
        theme: {
          fill: '#1b2a47',
          states: {
            hover: {
              fill: '#546c9b'
            },
            select: {
              fill: '#546c9b'
            }
          }
        }
      }
    },

    // scroll charts
    rangeSelector: {
      buttonTheme: {
        fill: '#1b2a47',
        stroke: '#000000',
        style: {
          color: '#E0E0E3'
        },
        states: {
          hover: {
            fill: '#546c9b',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          },
          select: {
            fill: '#071023',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          }
        }
      },
      inputBoxBorderColor: '#E0E0E3',
      inputStyle: {
        backgroundColor: '#152036',
        color: '#E0E0E3',
        fontWeight: 'bold',

        states: {
          hover: {
            fill: '#546c9b',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          },
          select: {
            fill: '#071023',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          }
        }
      },
      labelStyle: {
        color: '#E0E0E3'
      }
    },

    navigator: {
      handles: {
        backgroundColor: '#1b2a47',
        borderColor: '#7798BF',
      },
      outlineColor: '#546c9b',
      maskFill: 'rgba(255,255,255,0.1)',
      series: {
        color: '#7798BF',
        lineColor: '#546c9b'
      },
      xAxis: {
        gridLineColor: '#546c9b',
        labels: {
          style: {
            color: '#FFF',
            fontWeight: 'bold'
          }
        }

      },

    },

    scrollbar: {
      barBackgroundColor: '#1b2a47',
      barBorderColor: '#1b2a47',
      buttonArrowColor: '#FFF',
      buttonBackgroundColor: '#1b2a47',
      buttonBorderColor: '#1b2a47',
      rifleColor: '#FFF',
      trackBackgroundColor: '#152036',
      trackBorderColor: '#152036'
    },

    // special colors for some of the
    /*legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#FFF',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'*/
  };

  // Apply the theme
  Highcharts.setOptions(Highcharts.theme);

  var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        events: {
          load: function() {
            var chart = this

            if (grossLabel) {
              grossLabel.destroy();
            }

            var newX = chart.plotWidth / 2,
              newY = chart.plotHeight / 8;

            var grossLabel = chart.renderer.text('<div id="flash"></div>', newX, newY, true)
              .attr({
                zIndex: 10
              }).add();
          }
        }
      },

      title: {
        useHTML: true,
        text: 'Global mean surface Temperature',
        events: {
          mouseover: function() {
            reloadFlash();
            $('#flash').html('Global mean Surface temperature anomalies with respect to 1970-2000')
          },
          mouseout: function() {
            hideFlash();
          },
        }
      },

      subtitle: {
        text: 'CRPSS = 0.3 ACC= 0.6'
      },

      xAxis: {
        type: 'datetime'
      },

      yAxis: {
        title: {
          text: 'Temperature'
        }
      },
      /*
          annotations: [{
          labels: [{
              point: {
              x: 0,
              y: 0,
              },
              shape: 'rect',
              text: '0.6'


          }],
          labelOptions: {

              padding: 8,
              borderRadius: 5,
              backgroundColor: '#FFF',
              borderWidth: 1,
              borderColor: 'rgba(84, 108, 155, 1)',
              align: 'left',
                    allowOverlap: true,
                    verticalAlign: 'top',

          }
      }],*/
      /*
          tooltip: {
              crosshairs: true,
              shared: true,
              valueSuffix: '°C'
          },
      */
      tooltip: {
        xDateFormat: '%Y-%m-%d',
        headerFormat: '<span style="font-size: 16px">{point.key}</span><br/>',
        pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.y}</span><br/>',
        crosshairs: true,
        shared: true,
        useHTML: true,
        valueSuffix: ' C',
      },

      legend: {
        enabled: true
      },

      series: [{
        name: 'Observations',
        data: observations,
        zIndex: 0,
        lineWidth: 0,
        marker: {
          fillColor: 'white',
        }
      }, {
        name: 'MIN - MAX',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        fillOpacity: 0.5,
        zIndex: 1,
        marker: {
          enabled: false
        },
        tooltip: {
          pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
          valueSuffix: ' C',
        },
      }, {
        name: 'HINDCAST (33%) - SPREAD (66%)',
        data: midranges,
        type: 'arearange',
        lineWidth: 0,
        fillOpacity: 0.5,
        zIndex: 2,
        marker: {
          enabled: false
        },
        tooltip: {
          pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
          valueSuffix: ' C',
        },
      }, {
        name: 'BOXPLOT',
        type: 'boxplot',
        fillColor: '#6E8CD0',
        lineWidth: 2,
        medianWidth: 0,
        stemColor: '#6E8CD0',
        stemDashStyle: 'solid',
        stemWidth: 2,
        whiskerColor: '#6E8CD0',
        whiskerLength: '75%',
        whiskerWidth: 2,
        zIndex: 3,
        data: [
          [1577833200000, 0.5729389, 0.6131609, 0.61648345, 0.6465600, 0.660028],
        ],
        tooltip: {
          pointFormatter: function() {
            const x = this.x;
            const currentData = this.series.data.find(data => data.x === x);
            const boxplotValues = currentData ? currentData.options : {};
            return `<span style="font-size: 14px; color: #aaeeee"> 
                            Max: ${boxplotValues.high}<br>
                      Q3: ${boxplotValues.q3}<br>
                      Median: ${boxplotValues.median}<br>
                      Q1: ${boxplotValues.q1}<br>
                      Low: ${boxplotValues.low}<br></span>`;
          }
        }

      }]
    }
    /*, function (chart) { // on complete
    var point = chart.series[0].points[0];
    chart.renderer.label('CRPSS = 0.3 ACC = 0.6', 5, 5, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
            color: '#000000',
            fontWeight: 'bold',
            fontSize: '1.4em'

        })
        .attr({
            fill: 'rgba(255, 255, 255, 0.9)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();

}*/
  );
});

````

Answer 1

您可以像使用SVGRenderer一样使用其中的rect和text创建自定义工具提示。 Highcharts允许将SVG元素组合成一个组，并在其上使用SVGElement方法，例如show()和hide()，可用于切换自定义工具提示。同样，为了使工具提示跟随鼠标，on()方法将有助于在title元素上添加事件侦听器，并translate()来更改其位置。检查下面发布的代码和演示。

代码：

chart: {
  events: {
    load: function() {
      var chart = this,
        title = chart.title,
        titleBBox = title.getBBox(),
        gTooltip = chart.renderer.g().add(),
        textSvg,
        textSvgBBox;

      textSvg = chart.renderer
        .text(
          'Global mean Surface temperature anomalies with respect to 1970-2000' +
          '<br>' + 'more text, more text more text more text',
          titleBBox.x,
          title.alignAttr.y + titleBBox.height
        )
        .css({
          fill: '#fff'
        })
        .add(gTooltip);

      textSvgBBox = textSvg.getBBox();

      chart.renderer.rect(
        titleBBox.x - 15,
        title.alignAttr.y + titleBBox.height - 20,
        textSvgBBox.width + 20,
        textSvgBBox.height + 20
      ).attr({
        fill: 'rgba(0, 0, 0, 0.8)',
        stroke: 'black',
        'stroke-width': 1
      }).add(gTooltip);

      textSvg.toFront();
      gTooltip.hide();

      title.on('mousemove', function(e) {
        gTooltip.show().toFront();
        gTooltip.translate(e.x - textSvgBBox.x, e.y - 10);
      });

      title.on('mouseleave', function(e) {
        gTooltip.hide();
      });
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/yx6738q4/

API参考：

如何在鼠标悬停时定位自定义工具提示，等效于在图表属性中的事件加载上通过使用chart.renderer.text来使用默认工具提示

1 个答案: