单击 chart.js/vue.js 中的按钮时更改数据

Question

• 我有这个气泡图，如果一个数据点，值 2 > 1,000； 我想把它的颜色改成黄色。

• 默认情况下，每个值点 = 1,000 ； 如果用户点击气泡，我希望它是 = 6,000； 因此使气泡 go 从蓝色（默认）变为黄色。

我能够执行逻辑，在控制台中它显示了正确的值，但我试图弄清楚如何：

1. 重新加载图表； 传递新的正确值； 适当调整颜色或...
2. 覆盖此图； 使用调整后的颜色制作新图表

I've looked at the github https://vue-chartjs.org/guide/#updating-charts and feel overwhelmed to be honest, I've only coded in Python and only need this small JS element, thanks in advance!

这是我希望重新加载值的代码：

<div id="app">
  <graph-bubblecloud
            :width="500"
            :height="500"
            :padding-top="5"
            :padding-bottom="0"
            :padding-left="0"
            :padding-right="0"
            :values="values"
            :colors="colors"
            :styles="styles"
            :render-interval="0"
            @click="onClickEvent">
        <note :text="'Demo Graph v1'" :align="'left'"></note>
    </graph-bubblecloud>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-graph@0.5.3/dist/vue-graph.js"></script>


<script>
var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ "value1", 50, 6000 ],
            [ "value2", 50, 1000 ],
            [ "value3", 50, 1000 ],
            [ "value4", 50, 1000 ],
            [ "value5", 50, 1000 ],
            [ "value6", 50, 1000 ],
            [ "value6", 50, 1000 ]
        ],
        colors: function(data) {
            if (data[2] <= 1000) {
              return '#497eff';
            } else {
              return '#ffff00';
            }
        },
        styles: {
            titleFontSize: 19,
            titleFontWeight: 'bold'
        }
    },
    methods: {
        onClickEvent: function(obj, e) {
            console.log(obj.data);
            if (obj.data[2] > 1000) {
              obj.data[2] = 6000;

            } else {
              obj.data[2] = 6000;
            }
        }

    }
});
</script>

Answer 1

用它来用新数据更新图表：

    this.renderChart(this.chartdata, this.options)