如何使用 vue apex 图表 dataPointIndex 填充点击文本

Question

我正在尝试从 Apex 图表中点击填充文本区域。在下面的代码笔中，您可以单击该栏，它会生成带有图表中的值的警报。我想获取该值并使用 b-card 容器而不是警报将其放置在屏幕上。我应该使用双花括号进行数据绑定而不是 getElementById 吗？

{{data}}

从顶点图表返回数据的方法

getAlertData(event, chartContext, config){
   var data = [];
   data = this.series[0].data[config.dataPointIndex]
   return data
}

https://codepen.io/tone373/pen/dyajwpa?editors=1011

Answer 1

使用 Vue，如果可以避免，就不应该使用

document

等接口函数，例如

getElementById

。是的，使用带有双花括号的文本插值，这是执行此操作的“Vue 方式”。你的codepen的问题有两个

一，您试图显示

{{data}}

但没有

data

变量。 数据选项看起来像

data() {
  return {
   ...
  }
}

返回可通过

{{}}

在 HTML 中直接使用的变量。数据选项中名为“data”的变量不是一个很好的名称选择，但这取决于您......我可能会将其命名为“cardText”。然后分配它应在 click 方法中显示的值，并使用

{{}}

语法在 HTML 中显示此变量。

  data() {
    return {
      chart: {},        
      series: [],
      chartOptions: {}, 
      cardText: ''
    }
  },

...

  selectBar(event, chartContext, config) {
    this.cardText = this.series[0].data[config.dataPointIndex]
  }

<div>{{ cardText }}</div>

第二个问题是您尝试在 Vue 实例之外显示此数据。注意如何使用

创建 Vue 实例

new Vue({
    el: "#app",
    ...
})

#app

是 Vue 实例附加到的元素。 Vue only 可以直接控制该元素的 inside 代码，但您试图在

{{data}}

元素内显示它的 <b-card>

outside

。您只需将此代码移动到

<div id="app">

内部

更新了codepen

我使用了另一个

<div>

而不是

<b-card>

，因为你的 codepen 不包含使 b-card 工作的库。

我补充一下，以上所有信息都可以通过阅读官方Vue文档来了解。如果您还没有阅读或查阅过它，那么它写得非常好，并且将比几乎任何其他资源更好地帮助您学习 Vue 框架。