如何将圆角放在Chart.js条形图上 [英] How to put rounded corners on a Chart.js Bar chart
本文介绍了如何将圆角放在Chart.js条形图上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在chart.js中使用下面的代码创建了一个条形图。然而，我想给棒的圆角，而不是边缘的顶部的酒吧。我找不到任何方法这样做使用chart.js的全局设置。有没有办法实现我想要的效果？
var barContext = document.getElementById（canvas）。getContext 2d）;
var barGradientFirst = barContext.createLinearGradient（0，0，0，450）;
barGradientFirst.addColorStop（0，'rgba（112,122,157，0.1）'）;
barGradientFirst.addColorStop（1，'rgba（112,122,157，1）'）;
var barGradientSecond = barContext.createLinearGradient（0，0，0，450）;
barGradientSecond.addColorStop（0，'rgba（151,122,208，0.1）'）;
barGradientSecond.addColorStop（1，'rgba（151,122,208，1）'）;
var barChartData = {
labels：[High，Med，Low，None]，
datasets：[
{
fillColor：barGradientFirst，
strokeColor：rgb（112,122,200），
data：[30,40,70,90]
}，{
fillColor ：barGradientSecond，
strokeColor：rgba（220,100,80,0.8），
data：[50，60，65，20]
}]
}
new Chart（barContext）.Bar（barChartData，{
respond：true，
scaleOverride：true，
scaleBeginAtZero：true，
scaleSteps：2 ，
scaleLineWidth：3，
scaleStepWidth：50，
scaleShowLabels：true，
scaleShowVerticalLines：false，
scaleShowHorizontalLines：false，
scaleFontSize：30，
barValueSpacing：40，
barDatasetSpacing：3，
scaleLabel：<％= value +'％'％>
}
解决方案
这里是如何扩展Chart.js来绘制
Chart.types.Bar.extend（{
name：BarAlt，
initialize：function（data）{
Chart.types.Bar.prototype.initialize.apply（this，arguments）;
if（this.options.curvature！== undefined &&&&&<< = 1）{
var rectangleDraw = this.datasets [0] .bars [0] .draw;
var self = this;
var radius = this.datasets [0] .bars [0] .width * this.options.curvature * 0.5;
//覆盖用我们的矩形绘制
this.datasets.forEach函数（数据集）{
dataset.bars.forEach（function（bar）{
bar.draw = function（）{
//向下绘制原始柱使它到它的原始位置）
var y = bar.y;
//需要最小值，因此动画不会从轴下面开始
bar.y = Math.min（bar.y + radius，self.scale.endPoint - 1）;
//根据我们可以画出多少曲线来调整栏的半径。
var barRadius =（bar.y - y）;
rectangleDraw.apply（bar，arguments）;
//在顶部绘制一个圆角矩形
Chart.helpers.drawRoundedRectangle（self.chart.ctx，bar.x - bar.width / 2，bar.y - barRadius + 1， bar.width，bar.height，barRadius）;
ctx.fill（）;
//恢复y值
bar.y = y;
}
}）
}）
}
}
}）;
var lineChartData = {
labels：[January，February，March，April，May，June]，
datasets：[
{
fillColor：＃79D1CF，
strokeColor：＃79D1CF，
data：[60，80，81，56，55，40 ]
}，
{
fillColor：＃D1CF79，
strokeColor：＃D1CF79，
data：[34，43，43，12，65 ，65]
}
]
};
var ctx = document.getElementById（myChart）。getContext（2d）;
var myLine = new Chart（ctx）.BarAlt（lineChartData，{
// 0（flat）to 1（更弯曲）
curvature：1
}
如果你不需要动画，你可以简化代码。
小提琴 -
I have created a bar chart in chart.js using the below code. However I want to give the bars rounded corners instead of edged ones at the top of the bars. I can't find any way to do this using the global settings of chart.js. Is there any way to achieve the effect I want?
var barContext = document.getElementById("canvas").getContext("2d");
var barGradientFirst = barContext.createLinearGradient(0, 0, 0, 450);
barGradientFirst.addColorStop(0, 'rgba(112,122,157, 0.1)');
barGradientFirst.addColorStop(1, 'rgba(112,122,157, 1)');
var barGradientSecond = barContext.createLinearGradient(0, 0, 0, 450);
barGradientSecond.addColorStop(0, 'rgba(151,122,208, 0.1 )');
barGradientSecond.addColorStop(1, 'rgba(151,122,208, 1)');
var barChartData = {
labels: ["High", "Med", "Low", "None"],
datasets : [
{
fillColor : barGradientFirst,
strokeColor: "rgb(112,122,200)",
data: [30, 40, 70, 90]
}, {
fillColor : barGradientSecond,
strokeColor: "rgba(220,100,80,0.8)",
data: [50, 60, 65, 20]
}]
};
new Chart(barContext).Bar(barChartData, {
responsive : true,
scaleOverride : true,
scaleBeginAtZero : true,
scaleSteps : 2,
scaleLineWidth: 3,
scaleStepWidth : 50,
scaleShowLabels : true,
scaleShowVerticalLines: false,
scaleShowHorizontalLines: false,
scaleFontSize: 30,
barValueSpacing : 40,
barDatasetSpacing : 3,
scaleLabel: "<%= value + '%' %>"
});
解决方案
Here is how you extend Chart.js to draw a bar chart with rounded corners.
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function (data) {
Chart.types.Bar.prototype.initialize.apply(this, arguments);
if (this.options.curvature !== undefined && this.options.curvature <= 1) {
var rectangleDraw = this.datasets[0].bars[0].draw;
var self = this;
var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;
// override the rectangle draw with ours
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
bar.draw = function () {
// draw the original bar a little down (so that our curve brings it to its original position)
var y = bar.y;
// the min is required so animation does not start from below the axes
bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
// adjust the bar radius depending on how much of a curve we can draw
var barRadius = (bar.y - y);
rectangleDraw.apply(bar, arguments);
// draw a rounded rectangle on top
Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
ctx.fill();
// restore the y value
bar.y = y;
}
})
})
}
}
});
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
},
{
fillColor: "#D1CF79",
strokeColor: "#D1CF79",
data: [34, 43, 43, 12, 65, 65]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLine = new Chart(ctx).BarAlt(lineChartData, {
// 0 (flat) to 1 (more curvy)
curvature: 1
});
You could simplify the code a bit if you don't need the animation.
Fiddle - http://jsfiddle.net/0dzp3jxw/
这篇关于如何将圆角放在Chart.js条形图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
