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

Question

• 我有这个气泡图，如果有一个数据点，值2> 1,000；我希望将其颜色更改为黄色。

• 通过默认，每个值点= 1,000;如果用户点击气泡，我希望它等于6,000；因此使气泡从蓝色（默认）变为黄色。

我能够执行逻辑，在控制台中它显示了正确的值，但是我试图找出方法之一：

1. 重新加载图形；传递新的正确值；适当调整颜色或...
2. 覆盖此图；制作颜色经过调整的新图形

我看过github https://vue-chartjs.org/guide/#updating-charts，说实话感到不知所措，我只用Python编码，只需要这个小的JS元素，在此先感谢！

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

<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/[email protected]/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)