я правильно использую chart.update () при попытке обновить диаграмму?

Правильно ли я использую chart.update () при попытке обновить диаграмму?

У меня есть диаграмма, созданная с использованием chartjs и vuechartjs в моем проекте Vue. Данные будут переданы через mapGetters из моей базы данных. Данные будут меняться, и необходимо обновить yAxes, чтобы тики min и max и stepSize менялись в соответствии с отображаемыми доступными данными. Я бы не хотел, чтобы мой максимум составлял 2500 с размером шага 250 при отображении только максимальных данных 555. Я хочу, чтобы он был ближе к максимуму 600 с размером шага 50.

Я прочитал документацию и там сказано использовать chart.update (). Я пытаюсь проверить это, и он говорит, что обновление не может быть прочитано.

Ошибка в v-on обработчике: «Ошибка типа: не удается прочитать свойство« обновление »неопределенного»

Вот мой код.

 export default { components: { BarChart, RoiCalculator }, data() { return { data: [0,0,0,0,0,0,0,0,0,0,0], maxFeedback: 0, datacollection: null, // Configure chart options here options: { tooltips: { //Allows positioning of the tooltip to the event(mouse) position. Custom is the name of the position //because that is the function created for Chart.Tooltip.positoners position : 'custom', callbacks: { label: function(tooltipItem, data) { var label = Math.floor(tooltipItem.yLabel*100)/100 " " data.datasets[tooltipItem.datasetIndex].label; return label; } } }, maintainAspectRatio: false, legend: { //Hides the legend that would normally say NPS scores display: false }, // X and Y axes modified here scales: { // Allows you to customize the X axis xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Rating', }, gridLines: { display: false, tickMarkLength: 0, }, ticks: { padding: 15, showLabelBackdrop: false } }], // Allows you to customize the Y axis yAxes: [{ gridLines: { tickMarkLength: 0, }, ticks: { padding: 15, max: 500, min: 0, stepSize: 50 }, }] }, }, } }, mounted() { this.populateFeedback(); }, computed: { ...mapGetters({ filteredFeedback: "initialFeedback" }), tid: function() { return Spark.state.currentTeam.id; } , }, watch: { filteredFeedback: { handler(){ this.loadData() this.getMaxData() this.resizeChart() }, }, }, methods: { ...mapActions({ changeInitialFeedback: "changeInitialFeedback", }), updateChart(chart){ this.datacollection.datasets[0].data = [100, 200, 400, 600, 700, 1000, 120, 300, 305, 400, 555]; this.chartData.update(); }, loadData(){ this.datacollection = { labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], datasets: [{ label: '', data: this.sortData(), backgroundColor: [ 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(242, 74, 99)', 'rgb(253, 205, 61)', 'rgb(253, 205, 61)', 'rgb(9, 198, 117)', 'rgb(9, 198, 117)', ], }] } }, resizeChart(){ console.log(this.Chart) console.log(this.options.scales.yAxes[0].ticks.stepSize,'options') if(!this.maxFeedback {amp}lt;= 0 {amp}amp;{amp}amp; !this.maxFeedback {amp}gt;=100){ this.options.scales.yAxes[0].ticks.max = 100 this.options.scales.yAxes[0].ticks.stepSize = 10 } else if (this.maxFeedback {amp}lt;= 500){ this.options.scales.yAxes[0].ticks.max = 500 this.options.scales.yAxes[0].ticks.stepSize = 50 } else (this.maxFeedback {amp}lt;= 2200) this.options.scales.yAxes[0].ticks.max = 2500 this.options.scales.yAxes[0].ticks.stepSize = 250 }, getMaxData(){ const maxFB = Math.max.apply(Math, this.datacollection.datasets[0].data) console.log(maxFB, 'hello') this.maxFeedback = maxFB }, sortData(){ //Filters through all our filtered feedback data and adds them to each rating const output=[0,0,0,0,0,0,0,0,0,0,0] this.filteredFeedback.forEach(function (e) { output[e.nps_rating]  = 1 } ); return output }, populateFeedback() { axios .get(`/api/metricsPage/all/`   this.tid) .then(response ={amp}gt; { // Filtering out incomplete data let filteredFeedback = response.data.feedbacks.filter(feedback ={amp}gt; { return feedback.nps_icon || feedback.has_comments; }); filteredFeedback = filteredFeedback.map(feedback ={amp}gt;{ feedback.service_rating = Number(feedback.service_rating); feedback.product_rating = Number(feedback.product_rating); feedback.delivery_rating = Number(feedback.delivery_rating); feedback.nps_rating = Number(feedback.nps_rating); return feedback; }) // vuex calls to set global state this.changeInitialFeedback({ initialFeedback: filteredFeedback }); }) .catch(error ={amp}gt; { throw error; }); }, } } {amp}lt;/script{amp}gt; 
 {amp}lt;script{amp}gt; // This file is what exports the chart used in the index // Imports and determines type of chart (Line, Bar, etc.) import { Bar } from 'vue-chartjs' //Creates custom positioning for the positoning of the tooltip. Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //{amp}lt;-- custom is now the new option for the tooltip position /** @type {Chart.Tooltip} */ var tooltip = this; /* ... */ return { x: eventPosition.x, y: eventPosition.y }; } export default { extends: Bar, props: ['options', 'chartData'], data() { return{ chart: this.chartData } }, watch: { //Renders the chart chartData(){ this.renderChart(this.chartData, this.options) } }, } {amp}lt;/script{amp}gt; 

Я ожидал, что chart.update () обновится, но продолжает возвращаться неопределенным.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector