¿Cómo agregar el segundo eje Y para el gráfico de barras y líneas en Chart.js?
Estoy tratando de agregar un doble eje Y en Chart.js para dos comparaciones de conjuntos de datos. Actualmente estoy usando la extensión LineBar de Leigh Quince, que fue la respuesta que se encuentra aquí:Chart.js cómo obtener barras combinadas y gráficos de líneas?
También hay una solución escrita hace aproximadamente un año para el doble eje Y, pero solo para los gráficos de líneas, y está fuera de sincronía con el maestro de Nick. Parece que hay gráficos de líneas y barras, o doble Y, pero no ambos.
Mi problema aquí es que necesito representar TSAT% (niveles de saturación), eje Y izquierdo, gráfico de líneas, a la cantidad de niveles de dosificación de ferritina, gráfico de barras del eje Y derecho. Esto es lo que necesito para que se vea:
(Parece que Stackoverflow ha cambiado su color en mí, espero que aún puedas leer las escalas del eje Y)
Si alguien puede componer una solución, le agradecería mucho.
Código actual:
var data = {
labels: ["Jun 2013", "Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014"],
datasets: [
{
label: "TSAT",
type: "line",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7]
},
{
label: "Ferritin",
type: "bar",
fillColor: "#ed7141",
strokeColor: "#ed7141",
data: [939,929,949,991,992,993,976,976,973,986,972,939]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 10,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: 'Gotham Book,sans-serif',
scaleFontSize: 18,
}
ctx = $("#myChart").get(0).getContext("2d");
TSATChart = new Chart(ctx).LineBar(data, options);
Por cierto ... Modifiqué el LineBar de Quince para representar primero la Barra y luego las líneas. El código originalmente lo invirtió. Como tal, es posible que no pueda agregar algo a jsfiddle, editaré y agregaré un enlace si tengo éxito al agregar un ejemplo allí.
¡Gracias!