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/