javascript - chartjs-gráfico de líneas multieje-no se puede leer la propiedad ''min'' de indefinido

ajax vue.js

Question

Cuando ejecuta el código siguiente sin las scales y los valores de yAxisID , representa un gráfico de 2 líneas con ambas líneas en el mismo eje.

ACTUALIZACIÓN: cuando solo se eliminan los valores de yAxisID del código, se ejecuta como antes sin errores, aunque todavía con un solo eje y.

Al agregar estos elementos para obtener un eje dividido, devuelve el error js cannot read property ''min'' of undefined y el lienzo está en blanco.

No estoy seguro de si debe marcar la diferencia, pero los data son un objeto json devuelto a través de una solicitud ajax por medio de un método vue.js.

Aquí hay un ejemplo de cómo se ve la variable data.sales en la consola del navegador:

ventas: (187) [0, 0, 43.2874, 10.276, ..., 23.834]

var ctx = document.getElementById("chart_canvas").getContext(''2d'')
var basic_line = new Chart(ctx, {
type: ''line'',
data: {
labels: data.labels,
datasets: [{
label: ''Price'',
yAxisID: ''B'',
fill: false,
borderColor: ["#668cff"],
data: data.price
}, {
label: ''Sales'',
yAxisID: ''A'',
fill: false,
borderColor: ["grey"],
data: data.sales
}],
options: {
scales: {
yAxes: [{
id: ''A'',
position: ''left'',
type: ''linear''
}, {
id: ''B'',
position: ''right'',
type: ''linear''
}]
},
responsive: true,
maintainAspectRatio: false
}
}
})

Answer 1

El problema simplemente ocurre porque usted ha colocado las options objeto / propiedad dentro de la propiedad de data , mientras que debería estar afuera.

Aquí está la versión revisada de su código:

var ctx = document.getElementById("chart_canvas").getContext(''2d'')
var basic_line = new Chart(ctx, {
type: ''line'',
data: {
labels: data.labels,
datasets: [{
label: ''Price'',
yAxisID: ''B'',
fill: false,
borderColor: ["#668cff"],
data: data.price
}, {
label: ''Sales'',
yAxisID: ''A'',
fill: false,
borderColor: ["grey"],
data: data.sales
}]
},
options: {
scales: {
yAxes: [{
id: ''A'',
position: ''left'',
type: ''linear''
}, {
id: ''B'',
position: ''right'',
type: ''linear''
}]
},
responsive: true,
maintainAspectRatio: false
}
});