Javascript Chart.js 2.0-如何更改画布/图表元素的默认外观

我正在使用新的Chart.js并尝试完成一些定制。精通JS但对canvas不熟悉，我有点挣扎。我会尽力提供尽可能多的信息

相关链接

• 工作演示

代码- JavaScript

/**
*Chart.js全局配置
*/
Chart.defaults.global.pointHitDetectionRadius=5；
window.count=0；
/**
*图表数据
*@type{Object}
*/
变量lineChartData={
标签：[，“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“月”]，
数据集：[{
标签：“学生”，
数据：[200250220180290300370350200280260190210200]，
背景颜色：“rgba（247155,45,1.0）”，
边框颜色：“rgba（247155,45,1.0）”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
pointBorderColor:“rgba（245,1）”，
pointBackgroundColor:“rgba（80,81,81,1）”，
pointHoverBorderWidth:5，
点边界宽度：5，
点半径：8，
点半径：9，
点半径：8，
}]
};
/**
*初始化
*/
window.onload=函数（）{
var$chart=$（“#chart”）；
window.lineChart=新图表（$Chart[0]{
键入：“行”，
数据：线形图表数据，
选项：{
展品：没错，
//传奇
图例：{
显示：假
},
//头衔
标题：{
显示：假，
课文：'学生学时'
},
//工具提示
工具提示：{
启用：false，
},
//天平
比例：{
雅克斯：[{
id:'y轴-0'，
网格线：{
显示：对，
线宽：1，
颜色：“rgba（255255,0.85）”
},
滴答声：{
贝吉纳泽罗：是的，
镜子：错，
建议分钟：0，
建议最大值：500，
},
afterBuildTicks:函数（图表）{
}
}],
xAxes：[{
id:'x轴-0'，
网格线：{
显示：假
},
滴答声：{
贝吉纳泽罗：是的
}
}]
},
}
});
};

---

HTML

JS-Bin

---

CSS

#chartjs容器{
宽度：80%；
保证金：20px自动；
位置：相对位置；
}
.chartjs包裹{
背景色：rgba（2502101621.0）；
}
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
身高：100%；
}

我想做什么

沿y轴移除栅格线

删除数据集第一项和最后一项上与图表左/右边缘相交的点

插入y轴比例标签

使x轴网格线覆盖在线数据填充的顶部

截图 当前状态

所需状态（近似值）

任何能为我指明正确方向的帮助都会很好。画布的“Inspect Element”上是否有等效项？这些修复在CSS中是微不足道的，但我不确定如何调试

干杯

1.沿y轴移除网格线

只需将

options.scales.yAxes的
display
设置为false即可。这也将删除所有标签-我们将调用library方法在插件中绘制标签（不绘制y轴）（参见步骤4）


2.删除数据集第一项和最后一项上与图表左/右边缘相交的点

只需将数组传递给
pointRadius
和
pointHoverRadius
，而不是数字。以下数组将隐藏第一个点和最后一个点（与数据一起）

如果您的数据长度是动态的，则可能必须使用脚本生成


3.插入y轴比例标签

将
options.scales.yAxes的
ticks.mirror
设置为true。插件（来自步骤4）将只调用天平的库
draw
方法


4.使x轴网格线覆盖在线数据填充的顶部

要使网格线显示在填充上方但在点下方，最简单的方法是在填充下方绘制网格线，并将填充设置为略微透明的值

backgroundColor: "rgba(247,155,45,0.4)",

我们必须自己画网格线，因为我们不希望网格线从边缘开始。因此，将
选项.scales.yAxes的
网格线.display
设置为false，并注册以下插件

Chart.pluginService.register({
    afterDraw: function (chart, easingDecimal) {
        var yScale = chart.scales['y-axis-0'];
        var helpers = Chart.helpers;
        var chartArea = chart.chartArea;

        // draw labels - all we do is turn on display and call scale.draw
        yScale.options.display = true;
        yScale.draw.apply(yScale, [chartArea]);
        yScale.options.display = false;

        yScale.ctx.save();
            // draw under the fill
        yScale.ctx.globalCompositeOperation = 'destination-over';
        // draw the grid lines - simplified version of library code
        helpers.each(yScale.ticks, function (label, index) {
            if (label === undefined || label === null) {
                return;
            }

            var yLineValue = this.getPixelForTick(index);
            yLineValue += helpers.aliasPixel(this.ctx.lineWidth);

            this.ctx.lineWidth = this.options.gridLines.lineWidth;
            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';

            this.ctx.beginPath();
            this.ctx.moveTo(chartArea.left + 40, yLineValue);
            this.ctx.lineTo(chartArea.right, yLineValue);
            this.ctx.stroke();

        }, yScale);
        yScale.ctx.restore();
    },
})

所有图表都将调用插件。如果要跳过某些图表的上述逻辑，只需在
options
对象上设置一些属性，并在运行逻辑（例如
yAxis.options.custom
与
yAxis.options.display处于同一级别）之前进行检查即可


如果要隐藏0和500标签，可以为
options.scales.yAxes
设置
ticks.callback
，如下所示

callback: function(value) {
  if (value !== 0 && value !== 500)
    return '' + value;
},

请注意，只要您的比例在suggestedMin和suggestedMax范围内，它就可以工作。如果您的数据超出这些界限，则必须使用比例属性


要使x轴标签背景为白色，只需将下面的位添加到插件的
afterDraw
方法的末尾

yScale.ctx.save();
yScale.ctx.fillStyle = 'white';
yScale.ctx.globalCompositeOperation = 'destination-over';
yScale.ctx.fillRect(0, yScale.bottom, chartArea.right, chartArea.bottom);
yScale.ctx.restore();

它只是在画布内容下绘制一个白色矩形。因为您的背景颜色是通过CSS设置的，所以矩形位于背景颜色之上，并且所有内容都是闪亮的

您还必须将背景色从.chartjs包装移到画布上（否则底部会有橙色边框）


你的JSBin的更新版本将采用上述所有方法-
很好的方法！关闭有问题的部分，并使用
.pluginService
插入所需的部分。您好。首先-谢谢，了不起的工作。几件事：1）顶部和底部有一个轻微的显示错误（5）
yScale.ctx.save();
yScale.ctx.fillStyle = 'white';
yScale.ctx.globalCompositeOperation = 'destination-over';
yScale.ctx.fillRect(0, yScale.bottom, chartArea.right, chartArea.bottom);
yScale.ctx.restore();

canvas {
    background-color: rgba(250, 210, 162, 1.0);
    ...