javascript - Estilo X y Eje Y(marca de verificación) con Chart.js?

charts

Question

Intento cambiar el estilo del eje X y Y utilizando Chart.js, pude cambiar su ancho, pero por alguna razón no puedo cambiar el color de fondo y no hay nada en los documentos ( http: / /www.chartjs.org/docs/ ) que pueden ser de ayuda. Pude cambiar el fondo del eje X utilizando zeroLineColor , pero esto solo funciona si el conjunto de datos comienza en cero

Tenga en cuenta que no estoy tratando de dar estilo a las líneas de cuadrícula, sino a las líneas que están al lado de las marcas (anteriormente conocidas como etiquetas, si no estoy equivocado).

Mi marcado actual se ve así:

<canvas id="applauseChart" width="405" height="405"></canvas>

Y el código para generar el gráfico se ve así:

Chart.defaults.global.legend = {
display: false,
labels: {
fontFamily: "''Open Sans'', sans-serif",
fontSize: 12,
fontStyle: "bold",
fontColor: "#545454"
}
};
var ctx = $("#applauseChart");
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Applauses",
fill: false,
lineTension: 0,
backgroundColor: "transparent",
borderColor: "#FE8C85",
borderWidth: 10,
borderCapStyle: ''butt'',
borderDash: [],
borderDashOffset: 0,
borderJoinStyle: ''miter'',
pointBorderColor: "#FE8C85",
pointBackgroundColor: "#FE8C85",
pointBorderWidth: 10,
pointHoverRadius: 0,
pointHoverBackgroundColor: "transparent",
pointHoverBorderColor: "#FE8C85",
pointHoverBorderWidth: 10,
pointRadius: 0,
pointHitRadius: 10,
data: [0, 100, 200, 250, 150, 200, 250, 150, 100, 200, 250, 300]
}
]
};
var options = {
responsive: true,
maintainAspectRatio: false,
scaleStartValue: 0,
scaleStepWidth: 50,
defaultFontFamily : "''Open Sans'', sans-serif",
defaultFontSize : 12,
defaultFontStyle : "bold",
defaultFontColor : "#545454",
scales: {
xAxes: [{
gridLines: {
display: false,
color: "#CCC8BC",
lineWidth: 3,
zeroLineWidth: 3,
zeroLineColor: "#2C292E",
drawTicks: true,
tickMarkLength: 3
},
ticks: {
fontFamily: "''Open Sans'', sans-serif",
fontSize: 12,
fontStyle: "bold",
fontColor: "#545454"
}
}],
yAxes: [{
gridLines: {
display: true,
color: "#CCC8BC",
lineWidth: 3,
zeroLineWidth: 3,
zeroLineColor: "#2C292E",
drawTicks: true,
tickMarkLength: 3
},
ticks: {
fontFamily: "''Open Sans'', sans-serif",
fontSize: 12,
fontStyle: "bold",
fontColor: "#545454",
}
}]
}
};
var myLineChart = new Chart(ctx, {
type: ''line'',
data: data,
options: options
});

Siento que me falta algo en los documentos. ¿Hay alguna forma de hacer lo que estoy tratando de lograr?

Answer 1

Con Chart.js v2.1, puede escribir un complemento para hacer esto

Avance

Guión

Chart.pluginService.register({
afterDraw: function (chart, easing) {
if (chart.config.options && chart.config.options.scales) {
if (chart.config.options.scales.xAxes)
chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
if (!xAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var xAxis = chart.scales[xAxisConfig.id];
// just draw the scale again with different colors
var color = xAxisConfig.gridLines.color;
xAxisConfig.gridLines.color = xAxisConfig.color;
xAxis.draw(chartArea);
xAxisConfig.gridLines.color = color;
});
if (chart.config.options.scales.yAxes)
chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
if (!yAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var yAxis = chart.scales[yAxisConfig.id];
// here, since we also have the grid lines, set a clip area for the left of the y axis
ctx.save();
ctx.rect(0, 0, chartArea.left + yAxisConfig.gridLines.lineWidth - 1, chartArea.bottom + yAxisConfig.gridLines.lineWidth - 1);
ctx.clip();
var color = yAxisConfig.gridLines.color;
yAxisConfig.gridLines.color = yAxisConfig.color;
yAxis.draw(chartArea);
yAxisConfig.gridLines.color = color;
ctx.restore();
});
// we need to draw the tooltip so that it comes over the (redrawn) elements
chart.tooltip.transition(easing).draw();
}
}
});

y entonces

...
options: {
scales: {
xAxes: [{
color: ''blue'',
...
}],
yAxes: [{
color: ''blue'',
...
}]
}
...

Fiddle - http://jsfiddle.net/zfsc2wuc/