使用 Chart.js 样式 X 和 Y 轴(刻度线)? [英] Style X and Y Axis (tick mark) with Chart.js?

问题描述

我正在尝试使用 Chart.js 更改 X 轴和 Y 轴的样式，我能够更改它们的宽度，但由于某种原因我无法更改它们的背景颜色并且文档中没有任何内容(

请注意，我并不是要设置网格线的样式，而是要设置刻度线旁边的线(以前称为标签，如果我没记错的话).

我当前的标记如下所示:

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

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

Chart.defaults.global.legend = {显示:假，标签: {fontFamily: "'Open Sans', sans-serif",字体大小:12，fontStyle: "粗体",字体颜色:#545454"}};var ctx = $("#applauseChart");变量数据 = {标签:[Jan"、Feb"、Mar"、Apr"、May"、Jun"、Jul"、Aug"、Sep"、Oct"、Nov"、Dec"],数据集:[{label: "掌声",填充:假，线张力:0，背景颜色:透明"，边框颜色:#FE8C85"，边框宽度:10，borderCapStyle: '屁股',borderDash: [],borderDashOffset: 0,borderJoinStyle: '斜接',pointBorderColor: "#FE8C85",点背景颜色:#FE8C85"，点边框宽度:10，点悬停半径:0，pointHoverBackgroundColor: "透明",pointHoverBorderColor: "#FE8C85",点悬停边框宽度:10，点半径:0，点命中半径:10，数据:[0, 100, 200, 250, 150, 200, 250, 150, 100, 200, 250, 300]}]};变量选项 = {响应:真实，保持纵横比:假，scaleStartValue: 0,scaleStepWidth: 50,defaultFontFamily : "'Open Sans', sans-serif",默认字体大小:12，defaultFontStyle : "粗体",defaultFontColor : "#545454",尺度:{x轴:[{网格线: {显示:假，颜色:#CCC8BC"，线宽:3，零线宽度:3，zeroLineColor: "#2C292E",drawTicks:真实，刻度线长度:3},刻度:{fontFamily: "'Open Sans', sans-serif",字体大小:12，fontStyle: "粗体",字体颜色:#545454"}}],y轴:[{网格线: {显示:真实，颜色:#CCC8BC"，线宽:3，零线宽度:3，zeroLineColor: "#2C292E",drawTicks:真实，刻度线长度:3},刻度:{fontFamily: "'Open Sans', sans-serif",字体大小:12，fontStyle: "粗体",fontColor: "#545454",}}]}};var myLineChart = 新图表(ctx，{类型:'线'，数据:数据，选项:选项});

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

解决方案

有了Chart.js v2.1，你可以写一个插件来做到这一点

<小时>

预览

<小时>

脚本

Chart.pluginService.register({afterDraw:函数(图表，缓动){如果(chart.config.options && chart.config.options.scales){如果(chart.config.options.scales.xAxes)chart.config.options.scales.xAxes.forEach(函数(xAxisConfig){如果 (!xAxisConfig.color)返回;var ctx = chart.chart.ctx;var chartArea = chart.chartArea;var xAxis = chart.scales[xAxisConfig.id];//只需用不同的颜色再次绘制比例尺var color = xAxisConfig.gridLines.color;xAxisConfig.gridLines.color = xAxisConfig.color;xAxis.draw(chartArea);xAxisConfig.gridLines.color = 颜色；});如果(chart.config.options.scales.yAxes)chart.config.options.scales.yAxes.forEach(函数(yAxisConfig){如果(！yAxisConfig.color)返回;var ctx = chart.chart.ctx;var chartArea = chart.chartArea;var yAxis = chart.scales[yAxisConfig.id];//这里，因为我们也有网格线，所以在 y 轴的左边设置一个剪辑区域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 = 颜色；ctx.restore();});//我们需要绘制工具提示，使其覆盖(重绘)元素chart.tooltip.transition(easing).draw();}}});

然后

<代码>...选项: {尺度:{x轴:[{颜色:'蓝色'，...}],y轴:[{颜色:'蓝色'，...}]}...

<小时>

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

I'm trying to change both X and Y Axis' style using Chart.js, I was able to change their width, but for some reason I'm not able to change their background color and there's nothing in the docs (http://www.chartjs.org/docs/) that may be of help. I was able to change the X axis background using zeroLineColor, but this only works if the data set starts at zero

Note that I'm not trying to style grid lines, but actually the lines that are next to the ticks (formerly known as labels, if I'm not wrong).

My current markup looks like this:

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

And the code to generate the chart looks like this:

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

I feel like I am missing something in the docs. Is there a way to do what I'm trying to achieve?

解决方案

With Chart.js v2.1, you can write a plugin to do this

---

Preview

---

Script

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

and then

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

---

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

这篇关于使用 Chart.js 样式 X 和 Y 轴(刻度线)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！