javascript – Chart.js阴影区域
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Chart.js阴影区域,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1595字,纯文字阅读大概需要3分钟。
内容图文
![javascript – Chart.js阴影区域](/upload/InfoBanner/zyjiaocheng/698/ce49c6322d1346b3a989c61547a573f7.jpg)
Chart.js(http://www.chartjs.org/docs/)可以使用“fillColor”属性填充折线图下面的颜色(填充折线图本身和x轴之间的区域).
我想知道的是Chart.js是否可以配置为创建阴影区域,如下所示:
http://peltiertech.com/Excel/pix5/HorizBands09.png
谢谢.
解决方法:
线图的阴影区域
您可以扩展图表来执行此操作.
预习
要么
脚本
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var ranges = [
{
start: 100,
end: 75,
color: 'rgba(250,0,0,0.5)'
},
{
start: 75,
end: 50,
color: 'rgba(0,250,0,0.5)'
},
{
start: 50,
end: 25,
color: 'rgba(0,0,250,0.5)'
},
{
start: 25,
end: 0,
color: 'rgba(250,250,0,0.5)'
}
];
var scale = this.scale;
var rangesStart = scale.calculateY(ranges[0].start);
var rangesEnd = scale.calculateY(ranges[ranges.length - 1].end);
var gradient = this.chart.ctx.createLinearGradient(0, rangesStart, 0, rangesEnd);
ranges.forEach(function (range) {
gradient.addColorStop((scale.calculateY(range.start) - rangesStart) / (rangesEnd - rangesStart), range.color);
gradient.addColorStop((scale.calculateY(range.end) - rangesStart) / (rangesEnd - rangesStart), range.color);
})
this.datasets[0].fillColor = gradient;
}
});
接着
...
new Chart(ctx).LineAlt(data);
如果你想遮蔽整个背景使用
var originalDraw = scale.draw;
scale.draw = function() {
originalDraw.apply(this, arguments);
ctx.save();
ctx.fillStyle = gradient;
ctx.fillRect(scale.calculateX(0), scale.startPoint, scale.width, scale.endPoint - scale.startPoint);
ctx.restore();
}
而不是this.datasets [0] .fillColor = gradient;
小提琴(下线) – http://jsfiddle.net/61vg048r/
小提琴(整个背景) – http://jsfiddle.net/u4Lk7xns/
内容总结
以上是互联网集市为您收集整理的javascript – Chart.js阴影区域全部内容,希望文章能够帮你解决javascript – Chart.js阴影区域所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。