时间戳

首页 > 解决方案 > 如何使用 vue-plotly 模块覆盖 Plotly.js 方法（downloadImage）

vue.js - 如何使用 vue-plotly 模块覆盖 Plotly.js 方法（downloadImage）

问题描述

默认情况下，vue-plotly组件为输出图像提供了一个带有任意值的下载按钮，导致 PNG 质量低。

是否可以覆盖downloadImage方法？github 存储库自述文件指定该模块提供所有 plotly.js 事件和方法，但我没有找到这样做的方法。

有人可以提供一个最小的例子或给我一些指示来实现我想要做的事情吗？

我尝试了以下但没有成功：

<template>
    <v-container>
        <Plotly 
          v-if='!loading'
          :data.sync="data"
          :layout="layout"
        ></Plotly>
    </v-container>
</template>

<script>
import { Plotly } from 'vue-plotly';

export default {
    components: {
        Plotly
    },
    },
    data () {
      return {
        data: [],
        layout: {
          autosize: true,
          title: "MyTitle",
          showlegend: true,
        },
        loading: false,
      };
    },
    mounted () {
      this.loading = true;
      this.loadData().then(data => {
        this.data = data;
      }).catch( (error) => console.log("Error loading data: ", error) );
      this.loading = false;
    },
    methods: {
      downloadImage () {
        return Plotly.downloadImage(
          {
            format: 'png', width: 800, height: 600
          }
        )
      },
      loadData () {
        // Loading my data
      },
}

标签： vue.jsplotly.js

解决方案

根据@mit 和@Beinje 的评论，我已经尝试过了，这对我有用。

<Plotly :data="..." :layout="..." :toImageButtonOptions="{format: 'svg', scale: 1}"/>

在此处查看原因。这意味着除了 data、layout 和 id 之外的任何其他 props 都应该直接传递到元素中。

道具：

  • data Array（可选）：要显示的数据

  • 布局对象（可选）：图形布局

  • id String（可选）：组件的根 HTML 元素的 ID。

  • 其他：Plotly 组件实现透明包装模式：所有其他道具将作为 plotly 图形选项传递。

推荐阅读