样式X和Y轴（刻度标记）与Chart.js？ [英] Style X and Y Axis (tick mark) with Chart.js?
本文介绍了样式X和Y轴（刻度标记）与Chart.js？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用Chart.js改变X轴和Y轴的样式，我可以改变它们的宽度，但由于某种原因，我不能改变他们的背景颜色，没有什么在文档
请注意，我不是要格线网格线，而是实际上是下一行
我当前的标记如下所示：
< canvas id =applauseChartwidth =405height =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 ，Sep，Oct，Nov，Dec]，
数据集：[
{
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' 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
}）;
我觉得我在文档中缺少一些东西。
解决方案
使用Chart.js v2.1，你可以写
$ b b
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函数（xAxisConfig）{
if（！xAxisConfig.color）
return;
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 = color;
}）;
if（chart.config.options.scales.yAxes）
chart.config.options.scales.yAxes.forEach（function（yAxisConfig）{
if（！yAxisConfig。颜色）
return;
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 = color;
ctx.restore（）;
}）;
//我们需要绘制工具提示，以便它覆盖（重绘）元素
chart.tooltip.transition（easing）.draw（）;
}
}
}）;
，然后
code> ...
选项：{
scales：{
xAxes：[{
color：'blue'，
...
}]，
yAxes：[{
color：'blue'，
...
}]
}
...
Fiddle - 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/
这篇关于样式X和Y轴（刻度标记）与Chart.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
