vue-google-chart GChart 使用按钮更改图形类型答案

【问题标题】：vue-google-chart GChart changing graph type with a buttonvue-google-chart GChart 使用按钮更改图形类型
【发布时间】：2021-10-14 10:37:24
【问题描述】：

<GChart
    id="theChart"
    :type="newChartType"
    :data="chartData"
    :options="chartOptions()"
    :resize-debounce="500"
    :events="chartEvents"
    ref="gChart"
/>

<rev-button
    id="chart-button-1"
    @click="buttonClick"
>
</rev-button>

export default {
    name: 'RevChartWidget',
        components: {
            GChart
        },
    props: {
        chartData: {
            type: Array,
            required: true
        },
        chartTitle: {
            type: String,
            required: false,
            default: ''
        },
        chartType: {
            type: String,
            required: true
        }
    },
    setup(props) {
        let newChartType = 'LineChart'
        let pieHoleSize = 0.85
    
        if (props.chartData[0].length === 2) {
            newChartType = 'PieChart'
            
            if (props.chartType === 'PieChart') {
                pieHoleSize = 0.00
            }
        }

        let func = () => {
            let newChartType = 'LineChart'
            document.getElementById("chart").draw();
        }

        const chartOptions = () => {
            // options
            const options = {
                pieHole: pieHoleSize,
                // title
                titleTextStyle: { 
                    color: '#ffffff', 
                    fontSize: 16, 
                    fontName: 'Barlow' 
                },
                // horizontal axis
                hAxis: {
                    textStyle: {
                        color: '#ffffff',
                        fontName: 'Barlow',
                        fontSize: 12
                    },
                    slantedText: false,
                    minTextSpacing: 1
                },
                // vertical axis
                vAxis: {
                    textStyle: {
                        color: '#ffffff',
                        fontName: 'Barlow',
                        fontSize: 12
                    },
                    gridlines: {
                        count: 0
                    },
                    slantedText: false,
                    minTextSpacing: 1
                },
                // legend
                legend: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 14,
                        fontName: 'Barlow',
                        bold: true,
                        italic: false
                    }
                },
                // tooltip
                tooltip: {
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontName: 'Barlow',
                        bold: true,
                        italic: false
                    }
                },
                // chart
                // width: 740,
                // height: 200,
                backgroundColor: 'transparent',
                baselineColor: 'white'
            }
            
            const chart = {
                ...options,
                title: props.chartTitle
            }

            return chart
        }

        return {
            chartOptions,
            newChartType,
            func
        }
    },
    data(){
        return{
            buttonClick: () => {
                alert("test");
                var heading = document.getElementById("theChart");
                heading.setAttribute("type", "LineChart");
            },
            chartEvents: { // not currently working
                select: () => {
                    const table = this.$refs.gChart.chartObject;
                    const selection = table.getSelection();          
                    const onSelectionMessage = selection.length !== 0 ? 'was selected' : 'was diselected'
                    alert(onSelectionMessage);
                }
            }
        }
    }
}

我正在尝试为用户可能想要的每种图表类型设置按钮，然后当您单击按钮时，它将更新类型/使用新的图表类型刷新图表。我已经尝试了多种引用和更改 GChart 类型的方法，方法是调用其 id 名称等，但没有任何效果。我查看了文档，似乎您应该能够使用自定义 @ready 功能创建它的实例，但我无法让它工作，甚至不知道它是否对此有所帮助......

【问题讨论】：

认为您需要@ready 才能获得对ChartWrapper 对象的引用，您可以在该对象上使用setChartType 方法，之后必须重新绘制图表包装器...

标签： javascript html vue.js charts google-visualization

【解决方案1】：

我有类似的问题，但通过使用方法部分解决了它。你的按钮能识别点击吗？如果它根本无法识别点击，您可以尝试在导出默认部分中制作“方法”。然后在方法中包含 buttonClick。

methods: {
    async buttonClick (id) {
      *What the button should do* 
    }
}

【讨论】：