在 vuejs 中使 am4Charts 具有响应性

Question

我正在尝试在vuejs 中为am4chart 构建一个组件，我可以在不同的地方重新使用它，我有一些搜索选项可以根据搜索结果更改chartData 值。

当我的搜索页面加载时，它会完美地显示图表，但当我尝试检查过滤器时，它不会根据数据更改或显示。我在mounted 部分中拥有与am4Chart 相关的所有代码，因此我尝试将相同的代码放在我的methods 中，并尝试从那里在mounted 部分中调用method。我还放了一个watch 函数，以便在数据发生变化时可以再次调用该函数。但是当我将它放在methods 中时，整个chart 消失了，事实上，如果我将相同的代码放在mounted 和methods 部分它不会显示。

我通过控制台检查了我的method 在chartData 更改时被调用，但不知道如何使其具有响应性。

VueJS版本2.6.10

am4Chart版本4.4.10

我的代码：

<template>
    <div ref="amchart_semi_pie_chart"></div>
</template>

<script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";

    export default {
        name: "amchart-semi-pie-chart",
        props: {
            chartData: Object,
        },
        data() {
            return {
                chart: '',
            }
        },
        methods: {
            loadChart() {
                console.log('Values are changed')
            }
        },
        mounted() {
            //Creating charts
            let chart = am4core.create(this.$refs.amchart_semi_pie_chart, am4charts.PieChart);
            chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

            chart.data = this.chartData.data;

            // Add and configure Series

            chart.radius = am4core.percent(70);
            chart.innerRadius = am4core.percent(40);
            chart.startAngle = 180;
            chart.endAngle = 360;

            let series = chart.series.push(new am4charts.PieSeries());
            series.dataFields.value = "value";
            series.dataFields.category = "label";

            series.slices.template.cornerRadius = 10;
            series.slices.template.innerCornerRadius = 7;
            series.slices.template.draggable = true;
            series.slices.template.inert = true;
            series.alignLabels = false;

            if(this.chartData.legends)
                chart.legend = new am4charts.Legend();

            this.chart = chart;

        },
        watch: {
            chartData: {
                handler: 'loadChart',
                deep: true
            }
        },
        beforeDestroy() {
            if (this.chart) {
                this.chart.dispose();
            }
        }
    }
</script>

Answer 1

遇到了同样的问题，经过一番挖掘，我发现您可以使用 chart.invalidateRawData() 刷新数据。

参见文档AMCharts Data - Dynamic Updates (Manipulating existing data points)

我将它应用在对我有用的道具的 watch 方法上......

<template>
    <div ref="amchart_semi_pie_chart"></div>
</template>

<script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";

    export default {
        name: "amchart-semi-pie-chart",
        props: {
            chartData: Object,
        },
        data() {
            return {
                chart: '',
            }
        },
        methods: {
            loadChart() {
                console.log('Values are changed')
                this.chart.invalidateRawData();
            }
        },
        mounted() {
            //Creating charts
            let chart = am4core.create(this.$refs.amchart_semi_pie_chart, am4charts.PieChart);
            chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

            chart.data = this.chartData.data;

            // Add and configure Series

            chart.radius = am4core.percent(70);
            chart.innerRadius = am4core.percent(40);
            chart.startAngle = 180;
            chart.endAngle = 360;

            let series = chart.series.push(new am4charts.PieSeries());
            series.dataFields.value = "value";
            series.dataFields.category = "label";

            series.slices.template.cornerRadius = 10;
            series.slices.template.innerCornerRadius = 7;
            series.slices.template.draggable = true;
            series.slices.template.inert = true;
            series.alignLabels = false;

            if(this.chartData.legends)
                chart.legend = new am4charts.Legend();

            this.chart = chart;

        },
        watch: {
            chartData: {
                handler: 'loadChart',
                deep: true
            }
        },
        beforeDestroy() {
            if (this.chart) {
                this.chart.dispose();
            }
        }
    }
</script>

Answer 2

我知道这已经过时了，您可能已经继续进行该项目，但是自从今天我遇到了同样的问题并找到了解决方案以来，我想回复一下会很好。 就我而言，我没有使用道具，而是使用数据集的计算属性。 我已经尝试了一些方法，而对我有用的方法是将整个图表创建包装到一个方法中，并观察该计算属性（在您的情况下为道具）的更改并再次启动该方法。可以看出，图表确实是重新绘制的，虽然不如只有变化的动画那么好，但现在，它工作得很好。

因此，您的代码将如下所示：

<template>
    <div ref="amchart_semi_pie_chart"></div>
</template>

<script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";

    export default {
        name: "amchart-semi-pie-chart",
        props: {
            chartData: Object,
        },
        data() {
            return {
                chart: '',
            }
        },
        methods: {
            loadChart() {
                console.log('Values are changed')
            },
            renderChart() {
                //Creating charts
                let chart = am4core.create(this.$refs.amchart_semi_pie_chart, am4charts.PieChart);
                chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

                chart.data = this.chartData.data;

                // Add and configure Series

                chart.radius = am4core.percent(70);
                chart.innerRadius = am4core.percent(40);
                chart.startAngle = 180;
                chart.endAngle = 360;

                let series = chart.series.push(new am4charts.PieSeries());
                series.dataFields.value = "value";
                series.dataFields.category = "label";

                series.slices.template.cornerRadius = 10;
                series.slices.template.innerCornerRadius = 7;
                series.slices.template.draggable = true;
                series.slices.template.inert = true;
                series.alignLabels = false;

                if(this.chartData.legends)
                    chart.legend = new am4charts.Legend();

                this.chart = chart;
            }
        },
        mounted() {
            renderChart();
        },
        watch: {
            chartData: {
                renderChart();
            }
        },
        beforeDestroy() {
            if (this.chart) {
                this.chart.dispose();
            }
        }
    }
</script>