Изменение данных при нажатии кнопки в chart.js / vue. js - PullRequest
Новая
       35

Изменение данных при нажатии кнопки в chart.js / vue. js

0 голосов
/ 25 апреля 2020

  • У меня есть эта пузырьковая диаграмма, если одна точка данных, значение 2> 1000; sh, чтобы изменить его цвет на желтый .

  • По по умолчанию каждая точка значения равна = 1000 ; Если пользователь нажимает на пузырь, я хочу, чтобы он был = 6000; следовательно, делая пузырь go из синего (по умолчанию) в желтый.

Мне удалось сделать logi c, в консоли он показывает правильное значение, но я пытаясь выяснить, как:

  1. Перезагрузить график; передача новых правильных значений; правильная настройка цветов или ...
  2. Переопределить этот график; создание нового графика с откорректированными цветами

Я посмотрел на github https://vue-chartjs.org/guide/#updating-Charts и чувствую себя ошеломленным, если честно, я только кодировал Python и нужен только этот маленький JS элемент, заранее спасибо!

Вот мой код, который я sh буду перезагружать значения: 

<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>

1 Ответ

0 голосов
/ 26 апреля 2020

используйте это, чтобы обновить диаграмму новыми данными: 

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