Vue ChartJS从组件中的图表获取数据

e37o9pze 于 2022-11-23 发布在 Chart.js

关注(0)|答案(1)|浏览(180)

我有一个图表在一个模态，我想得到的值，当我点击它，以发送一个请求，并获得更多的信息。
我在文档https://www.chartjs.org/docs/latest/configuration/interactions.html中看到，当我单击时，我得到了该事件。
我的图表选项

chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        interaction:{
          mode: 'nearest',
        },
        onClick: this.handleChartClick,
      },

本发明方法

handleChartClick(e){
      console.log(e);
      
    },

但是如何引用我自己的图表，就像在另一个例子中一样：
How to access or get value of specific graph on chart plot by click event?
我相信这是显而易见的，但这是我第一次尝试使用chartJS。

chart.js

来源：https://stackoverflow.com/questions/74458121/vue-chartjs-get-data-from-a-chart-in-component

1条答案

按热度按时间

jhdbpxl91#

果然是显而易见。
我的图表中只需要一个ref属性。

<Bar v-if="!is_loading"
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
    ref="myBarChart"
/>

该方法包括：

handleChartClick(e){
   var chart = this.$refs.myBarChart.$data._chart;
}

赞(0）回复(0）举报 2022-11-23

我来回答

Vue ChartJS从组件中的图表获取数据

1条答案

相关问题

热门标签

最新问答