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

Question

我在 Vue 中使用 Highcharts 股票，我想实现的是当我将鼠标悬停在一个股票点时，工具提示出现，同时，在其他地方可能是股票图表的顶部，因为与其他样式的工具提示中的数据相同。我的方法是在tooltip formatter函数中导出数据，但是在formatter函数中this并没有引用Vue实例。请问有什么方法可以访问hovering tooltip数据，或者有什么其他方法可以实现这个效果

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

Answer 1

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

的引用

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

Answer 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}
            `
          }
        }
      }
    }
  }
}

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

How to access Highcharts stock tooltip data in Vue?

javascript

highcharts

vue.js