У меня есть диаграмма, созданная с использованием chartjs и vuechartjs в моем проекте Vue. Данные будут переданы через mapGetters из моей базы данных. Данные будут меняться, и необходимо обновить yAxes, чтобы тики min и max и stepSize менялись в соответствии с отображаемыми доступными данными. Я бы не хотел, чтобы мой максимальный был 2500 с размером шага 250 при отображении только максимальных данных 555. Я хочу, чтобы он был ближе к максимальному 600 с размером шага 50.
Я прочитал документацию иговорит использовать chart.update (). Я пытаюсь проверить это, и он говорит, что обновление не может быть прочитано.
Ошибка в v-on обработчике: «Ошибка типа: не удается прочитать свойство« обновление »неопределенного» * 1005 *
Вот мой код.
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 <= 0 && !this.maxFeedback >=100){
this.options.scales.yAxes[0].ticks.max = 100
this.options.scales.yAxes[0].ticks.stepSize = 10
}
else if (this.maxFeedback <= 500){
this.options.scales.yAxes[0].ticks.max = 500
this.options.scales.yAxes[0].ticks.stepSize = 50
}
else (this.maxFeedback <= 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 => {
// Filtering out incomplete data
let filteredFeedback = response.data.feedbacks.filter(feedback => {
return feedback.nps_icon || feedback.has_comments;
});
filteredFeedback = filteredFeedback.map(feedback =>{
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 => {
throw error;
});
},
}
}
</script>
<script>
// 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) { //<-- 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)
}
},
}
</script>
Я ожидал обновления chart.update (), но он продолжает возвращаться неопределенным.