使用Vue Chart.js动态更改图表类型 [英] Dynamically changing chart types with Vue Chart.js

问题描述

我正在尝试使用Vue Chart.js来实现图表选择器以可视化各种数据.

I'm trying to use Vue Chart.js to implement a chart selector to visualise various data.

应用程序结构:

• ChartPicker.vue(允许用户选择图表，创建数据，使用动态组件键重新呈现组件)
  • ChartWrapper.vue(接收道具并将其传递，为动态图表类型创建mixin)
    • ChartRender.vue(仅绘制图表)
    • ChartPicker.vue (allow user to pick chart, create data, use dynamic component key to re-render component)
      • ChartWrapper.vue (receives props and passes them on, creates mixin for dynamic chart type)
        • ChartRender.vue (simply renders chart)

        在图表渲染组件中，通常需要执行扩展:条形图"，扩展:线形"等操作，因此，每种图表类型都需要具有ChartRender组件类型.我找到了一种整洁的解决方案，可以将图表类型传递给图表mixins，然后最终的图表呈现没有引用图表类型(即使在查看vue-chart.js代码后也不清楚它是如何工作的).这是我基于代码的示例(没有选择图表类型):

        In the chart render component you usually you need to do 'extends: Bar', 'extends: Line' etc, therefore, requiring a ChartRender component type for each chart type. I found a neat solution that passes in the chart type to the chart mixins, then the final chart render makes no reference to chart type (not quite clear how this works even after looking at vue-chart.js code). This is the example I based my code on (it has no chart type selection):

        https://codesandbox.io/s/vue-template-original-1czfi

        因此，我尝试扩展该示例的功能以添加图表选择器.它在某种程度上可以改变图表类型:更改数据，重新渲染组件，但是图表类型不会改变(即使它是动态传递给mixin的)

        So, I tried to extend functionality of that example to add a chart selector. It's working to an extent on chart type change: data changes, components re-render but the chart type doesn't change (even though it's being passed to the mixin dynamically)

        我在这里有一个运行示例:

        I have a running example here:

        https://codesandbox.io/s/vue-chart-issue -v2-twg3o

        我花了将近一个星期的时间来尝试解决这个问题.我可以创建一种变通办法，为每种图表类型(例如ChartRenderBar，ChartRenderLine等)使用单独的ChartRender组件，但它会远离DRY，所以宁可不要.

        I've spent nearly a week trying to figure this out with no joy. I could create a workaround to use a separate ChartRender component for each chart type (e.g. ChartRenderBar, ChartRenderLine etc) but it moves away from DRY, so would rather not.

        如果有人可以帮助我，我将非常感激，

        If anybody could help, I'd be VERY appreciative,

        推荐答案

        在Vuejs中，创建组件后无法更改mixins，因此，我在

        in Vuejs, it is not possible to change mixins after the component being created, and because of this I've used a wrapper component in my other solution, so I can pass a mixin dynamically before the component being created, but unfortunately, there is no way to have some kind of reactive mixin.

        我为您解决的当前情况将是这样的:
        https://codesandbox.io/s/vue-template-y5wsw

        my solution for you current situation would be something like that:
        https://codesandbox.io/s/vue-template-y5wsw

        在上述解决方案中，我创建了两个组件， BarChart 和 LineChart
        要在这些功能之间动态切换，我正在使用vuejs中最出色的功能之一，动态组件

        in the above solution, I have created two components, BarChart and LineChart
        to switch between those dynamically, I am using one of the most awesome features in vuejs, Dynamic Component

        当然，为避免重复数据源，您可以使用vuex在多个组件之间共享数据，也可以将数据放在父页面中并访问数据集或选项，例如

        and of course to avoid duplicating the data source, you can use vuex to share data between multiple components, or you can have the data in the parent page and access your dataset or options like

        this.$parent['whatever data property in your parent component']

        希望您发现这很有帮助.

        Hope you found this helpful.

        这篇关于使用Vue Chart.js动态更改图表类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！