原始答案

Question

我正在使用VueCharts这是vue的Google Charts插件。

我试图将更新的Material Design外观添加到图表中。我试过传递＆＃34; google.charts.Bar＆＃34;图表类型道具它确实有效。但是，许多选项都会被忽略，因为正如Google Charts docs中所述，需要使用google.charts.Bar.convertOptions(options)转换选项对象，这是插件无法做到的。

查看源代码，该插件会安装一个＆＃39; vue-chart＆＃39;零件。该组件使用ChartWrapper来处理图表库的加载，如下所示：

methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: options,
        containerId: containerId
      })

      return wrapper
    },

所以我需要的是覆盖此方法以在将选项传递给ChartWrapper之前转换选项。

但是怎么样？我还没有找到一种方法来简单地覆盖vue docs中的组件方法。我可以创建一个新组件并向下传递转换后的选项，但我需要访问google对象，该对象仅由插件内部加载。

我也读过我可以使用mixins，但它不清楚如何。这不起作用：

Vue.component('MyCustomChart', {
    mixins: ['vue-chart'],
    methods: {
        buildWrapper (chartType, dataTable, options, containerId) {
            let wrapper = new google.visualization.ChartWrapper({
                chartType: chartType,
                dataTable: dataTable,
                options: google.charts.Bar.convertOptions(options), // that's all I need
                containerId: containerId
            })

            return wrapper
        },
    }
})

[Vue警告]：无法安装组件：未定义模板或渲染功能。（在MyCustomChart中找到）

Answer 1

我玩了一下这个，我误导@thanksd上面提出了我的建议，扩展了什么。一种有效的方法是：

import VueChart from "vue-charts";

Vue.use(VueChart);

const BaseChart = Vue.options.components["vue-chart"];
const CustomChart = BaseChart.extend({
  methods:{
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: google.charts.Bar.convertOptions(options),
        containerId: containerId
      })

      return wrapper
    }
  }
});

Vue.component("custom-chart", CustomChart);

进一步说明

正如我所想，通过Vue的原生扩展或lodash扩展VueChart将无法达到预期的效果。导入VueChart的结果是plugin definition。 lodash和Vue都很乐意接受作为扩展的对象，但两者都不会产生Vue组件。试图使用其中任何一个的结果将导致问题中提到的错误，＆＃34;模板或渲染函数未定义＆＃34;。这个错误绝对是真的;扩展VueChart使用单个方法扩展安装功能。

那么如何让对象扩展呢？ vue-charts没有曝光它。安装只需调用Vue.component('vue-chart', Chart)。

幸运的是，Vue通过Vue.options.components制作全局安装的组件。通过扩展Vue.options.components["vue-chart"]，我们得到了一个合适的Vue组件定义。

最后，我很惊讶google @RegularEverydayNormalGuy无法使用。它必须是可用的; vue-chart使用它。但他是对的，立即无法使用。 vue-chart异步加载脚本。同样，该插件很遗憾无法以任何方式向您提供it just initializes itself after it's asynchronously loaded。有办法解决这个问题，但那时你应该提交拉取请求。

原始答案

options是vue-chart上的属性。为什么不直接传入已转换的选项？

new Vue({
    data:{
        convertedOptions: google.charts.Bar.convertOptions({<my options>})
    }
})

在模板中

<vue-chart :options="convertedOptions"></vue-chart>

Answer 2

您可以使用Vue的extend方法来自定义插件组件。

在你的情况下：

import VueCharts from 'vue-charts'  
Vue.use(VueCharts);

const Base = Vue.options.components["vue-chart"];
const CustomChart = Base.extend({
  methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: google.charts.Bar.coverOptions(options),
        containerId: containerId
      })

      return wrapper
    },
  })
}

Vue.component('MyCustomChart', CustomChart);

（感谢Bert Evans注意到在扩展到自定义之前需要从Vue.options.components引用基本组件）

覆盖组件方法

2 个答案:

原始答案