如何在 Vue 中访问 Highcharts 股票工具提示数据？答案

【问题标题】：How to access Highcharts stock tooltip data in Vue?如何在 Vue 中访问 Highcharts 股票工具提示数据？
【发布时间】：2021-07-14 16:27:37
【问题描述】：

我在Vue中使用Highcharts股票，我想要实现的是当我悬停一个股票点时，工具提示出现，同时在其他地方可能是股票图表的顶部，与其他样式的工具提示中的数据。我的方法是在tooltip格式化函数中导出数据，但是格式化函数this没有引用Vue实例。我想知道是否有任何方法可以访问悬停工具提示数据，或者是否有任何其他方法可以实现效果。

the effect i want to realize

<template>
  <div>
    <div class="outerTooltip">open: xxx</div>
    <highcharts :constructor-type="'stockChart'" :options="stockOptions"></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import stockInit from "highcharts/modules/stock";
import { data } from "./stockData";

stockInit(Highcharts);

export default {
  name: "StockVue",
  computed: {
    stockOptions() {
      return {
        ...,
        tooltip: {
          shared: true,
          formatter(){
            console.log(this)
            // how can i export data in this to Vue, so i can show it in outerTooltip dynamically
            retuen `
              open: ${this.points[0].point.open}
            `
          }
        }
      }
    }
  }
}

codesandbox example

【问题讨论】：

标签： javascript vue.js highcharts

【解决方案1】：

我认为你只需要将Vue实例的引用分配给一个变量，然后在formatter函数中使用它。还记得添加对计算属性的引用。

演示：https://codesandbox.io/s/highcharts-vue-test-forked-c7pvw?file=/src/components/StockVue.vue

【讨论】：

【解决方案2】：

将 Vue 实例的引用分配给对我有用的变量。

export default {
  name: "StockVue",
  method: {
    exportTooltipData(data){
      console.log(data)
    }
  },
  computed: {
    stockOptions() {
      const exportFn = this.exportTooltipData;
      return {
        ...,
        tooltip: {
          shared: true,
          formatter(){
            exportFn(this);
            retuen `
              open: ${this.points[0].point.open}
            `
          }
        }
      }
    }
  }
}

【讨论】：