样式X和Y轴（刻度线）与Chart.js？

Question

我试图改变X和Y轴＆＃39;使用Chart.js的风格，我能够改变它们的宽度，但由于某种原因，我无法改变它们的背景颜色，并且文档中没有任何内容（http://www.chartjs.org/docs/）可能是帮助。我能够使用zeroLineColor更改X轴背景，但这仅在数据集从零开始时才有效

请注意，我并没有尝试设置网格线的样式，而是实际上是刻度线旁边的线条（以前称为标签，如果我没有错误的话）。

我目前的标记看起来像这样：

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

生成图表的代码如下所示：

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
});

我觉得我在文档中遗漏了一些东西。有没有办法做我想要实现的目标？

Answer 1

使用Chart.js v2.1，您可以编写一个插件来执行此操作

预览

<强>脚本

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();
        }
    }
});

然后

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

小提琴 - http://jsfiddle.net/zfsc2wuc/