ChartJS绘制X轴和Y轴网格线
ChartJS绘制X轴和Y轴网格线
提问于 2015-10-09 05:26:48
我第一次尝试chart.js。它具有显示或隐藏垂直或水平网格线(即scaleShowHorizontalLines: true/false或scaleShowVerticalLines: true/false )的选项。但它不会在实际的x轴或y轴上绘制网格线。如何绘制x轴或y轴的网格线？
Stack Overflow用户
发布于 2015-10-09 08:26:39
但它不会在实际的x轴或y轴上绘制网格线。
设置scaleShowHorizontalLines或scaleShowVerticalLines不会隐藏x或y轴。
但是，如果您想隐藏它(或使它可见)而不隐藏缩放标签，您可以这样做。
var myChart = new Chart(ctx).Line(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
...隐藏斧头。或覆盖任何全局配置并显示轴(您可以放入任何颜色)。
var myChart = new Chart(ctx).Line(data, {
scaleLineColor: 'rgba(0, 0, 0, 1)',
...如果您没有看到x和y轴以及它们的标签，则可能有showScale全局配置为false。
var myChart = new Chart(ctx).Line(data, {
showScale: true,
...只绘制没有Y轴的X轴
如果您想要绘制x轴而不是y轴，则必须同时隐藏并自己绘制x轴，如下所示
Chart.types.Bar.extend({
name: "BarAlt",
intialize: function () {
Chart.types.Bar.intialize.draw.apply(this, arguments);
},
draw: function () {
Chart.types.Bar.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
ctx.save();
ctx.lineWidth = this.scale.lineWidth;
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(this.scale.xScalePaddingLeft, this.scale.calculateY(0));
ctx.lineTo(this.chart.width, this.scale.calculateY(0));
ctx.stroke();
ctx.closePath();
ctx.restore();
}
});
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(254, 164, 0, 1)",
strokeColor: "rgba(254, 164, 0, 1)",
highlightFill: "rgba(254, 164, 0, 1)",
highlightStroke: "rgba(254, 164, 0, 1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).BarAlt(data, {
scaleFontColor: '#fff',
scaleGridLineColor: 'rgba(255, 255, 255, 0.4)',
scaleLineColor: 'rgba(0, 0, 0, 0)',
scaleShowVerticalLines: false
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33030531
复制相关文章
相似问题
腾讯云开发者
