Javascript 使用角度和图表创建圆形条形图
我会把我的普通条形图转换成一个圆形的细条,就像下面的照片一样 我看到了很多建议绘制/扩展新图表的示例,但我不知道如何在角度框架内完成,下面是一个示例 这是我的实际图形栏:Javascript 使用角度和图表创建圆形条形图,javascript,angular,typescript,chart.js,Javascript,Angular,Typescript,Chart.js,我会把我的普通条形图转换成一个圆形的细条,就像下面的照片一样 我看到了很多建议绘制/扩展新图表的示例,但我不知道如何在角度框架内完成,下面是一个示例 这是我的实际图形栏: const ctx = this.myChart.nativeElement.getContext('2d'); this.myChartBis = new Chart(ctx, { type: 'bar', data: { labels: this.labels, datasets: [{
const ctx = this.myChart.nativeElement.getContext('2d');
this.myChartBis = new Chart(ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
label: 'test',
showLine: true,
lineTension: 0,
data: this.data,
fill: false,
pointBorderColor: '#cd0037',
pointBackgroundColor: '#ffffff',
borderColor: [
'#747678',
],
borderWidth: 0
}
],
},
options: {
showLines: true,
legend: {
display: false,
},
responsive: true,
maintainAspectRatio: true,
tooltips: {
yPadding: -2,
xPadding: 10,
footerMarginTop: 5,
titleFontColor: 'rgba(0, 0, 255, 0.0)',
displayColors: false,
borderWidth: 1,
bodyFontSize: 16,
bodyFontFamily: 'Avenir',
backgroundColor: '#FFF',
borderColor: '#d7d7d7',
bodyFontColor: '#0088ce',
scales: {
yAxes: [{
display: false,
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
display: true,
autoSkip: false,
min: 0,
max: 100,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
autoSkip: false,
callback: (value: any) => {
return value;
}
}
}]
}
}
});
我所期望的是像照片中那样的圆形条带一个附加条件:id无值打印一个灰点(但优先权是制作圆形条)您可以使用您已经提到的内容。您需要做的是添加两个文件
Chart.roundedBarCharts.js
和Chart.roundedBarChart.min.js
(只需将它们复制到您的项目文件夹中,并将它们包括在内)。
然后,在包含此内容后,您可以使用:
var options = {
cornerRadius: 20,
};
对于照片上的小条,您应该添加barPercentage
,然后您的代码将如下所示:
var options = {
cornerRadius: 20,
scales: {
xAxes: [{
barPercentage: 0.4
}]
}
};
角度7,chart.js条形图圆角
HTML
<div style="width: 40%">
<canvas id="barChart"></canvas>
</div>
.ts
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
ngAfterViewInit() {
this.canvas = document.getElementById('barChart');
this.ctx = this.canvas.getContext('2d');
Chart.elements.Rectangle.prototype.draw = function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped, radius;
var borderWidth = vm.borderWidth;
// If radius is less than 0 or is large enough to cause drawing errors a maxhttp://jsfiddle.net/adammoisa/v0dthnyr/7/#
// radius is imposed. If cornerRadius is not defined set it to 0.
var cornerRadius = this._chart.config.options.cornerRadius;
var fullCornerRadius = this._chart.config.options.fullCornerRadius;
var stackedRounded = this._chart.config.options.stackedRounded;
var typeOfChart = this._chart.config.type;
if (cornerRadius < 0) {
cornerRadius = 0;
}
if (typeof cornerRadius == 'undefined') {
cornerRadius = 0;
}
if (typeof fullCornerRadius == 'undefined') {
fullCornerRadius = false;
}
if (typeof stackedRounded == 'undefined') {
stackedRounded = false;
}
if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;
// Corner points, from bottom-left to bottom-right clockwise
// | 1 2 |
// | 0 3 |
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
// Find first (starting) corner with fallback to 'bottom'
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}
function cornerAt(index) {
return corners[(startCorner + index) % 4];
}
// Draw rectangle from 'startCorner'
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
var nextCornerId, nextCorner, width, height, x, y;
for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0
}
nextCorner = cornerAt(nextCornerId);
width = corners[2][0] - corners[1][0];
height = corners[0][1] - corners[1][1];
x = corners[1][0];
y = corners[1][1];
var radius = cornerRadius;
// Fix radius being too large
if (radius > Math.abs(height) / 2) {
radius = Math.floor(Math.abs(height) / 2);
}
if (radius > Math.abs(width) / 2) {
radius = Math.floor(Math.abs(width) / 2);
}
var x_tl, x_tr, y_tl, y_tr, x_bl, x_br, y_bl, y_br;
if (height < 0) {
// Negative values in a standard bar chart
x_tl = x;
x_tr = x + width;
y_tl = y + height;
y_tr = y + height;
x_bl = x;
x_br = x + width;
y_bl = y;
y_br = y;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// bottom right
ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left
fullCornerRadius ? ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius) : ctx.lineTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bottom left
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else if (width < 0) {
// Negative values in a horizontal bar chart
x_tl = x + width;
x_tr = x;
y_tl = y;
y_tr = y;
x_bl = x + width;
x_br = x;
y_bl = y + height;
y_br = y + height;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// Bottom right corner
fullCornerRadius ? ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius) : ctx.lineTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right Corner
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left corner
ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bttom left corner
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else {
var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
lastVisible = findLast;
}
}
var rounded = this._datasetIndex === lastVisible;
if (rounded) {
//Positive Value
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
// top right
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
// bottom right
if (fullCornerRadius || typeOfChart == 'horizontalBar')
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
else
ctx.lineTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
// bottom left
if (fullCornerRadius)
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
else
ctx.lineTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
// top left
if (fullCornerRadius || typeOfChart == 'bar')
ctx.quadraticCurveTo(x, y, x + radius, y);
else
ctx.lineTo(x, y, x + radius, y);
} else {
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + height);
ctx.lineTo(x, y);
}
}
}
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
};
/**Chart Data**/
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'data 0',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 0
}, {
label: 'data 1',
data: [20, 24, 10, 15, 12, 13],
backgroundColor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 0
}, {
label: 'data 2',
data: [20, 30, 30, 20, 14, 20],
backgroundColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 0
}]
};
/**Chart Options - Radius options are here**/
var options = {
//Border radius; Default: 0; If a negative value is passed, it will overwrite to 0;
cornerRadius: 20,
//Default: false; if true, this would round all corners of final box;
fullCornerRadius: false,
//Default: false; if true, this rounds each box in the stack instead of only final box;
stackedRounded: false,
legend: {
display: false
},
elements: {
point: {
radius: 25,
hoverRadius: 35,
pointStyle: 'rectRounded',
}
},
scales: {
yAxes: [{
gridLines: {
display:false
},
ticks: {
beginAtZero: true
},
stacked: true,
radius: 25
}],
xAxes: [{
gridLines: {
display:false
},
ticks: {
beginAtZero: true
},
stacked: true,
}]
}
};
/**Generate Chart**/
// var ctxBar = document.getElementById("myChart");
var myBarChart = new Chart(this.ctx, {
type: 'bar',
data: data,
options:options
});
}
HTML
.ts
图表颜色={
红色:“rgb(255,99,132)”,
橙色:“rgb(25515964)”,
黄色:“rgb(25520586)”,
绿色:“rgb(75192192)”,
蓝色:“rgb(54162235)”,
紫色:“rgb(153102255)”,
灰色:“rgb(231233237)”
};
ngAfterViewInit(){
this.canvas=document.getElementById('barChart');
this.ctx=this.canvas.getContext('2d');
Chart.elements.Rectangle.prototype.draw=函数(){
var ctx=此值。\u chart.ctx;
var vm=此视图;
变量左、右、上、下、signX、signY、borderSkipped、radius;
var borderWidth=vm.borderWidth;
//如果半径小于0或大到足以导致图形错误,则maxhttp://jsfiddle.net/adammoisa/v0dthnyr/7/#
//半径是强制的。如果未定义拐角半径,则将其设置为0。
var cornerRadius=此。_chart.config.options.cornerRadius;
var fullCornerRadius=此。_chart.config.options.fullCornerRadius;
var stackedRounded=this.\u chart.config.options.stackedRounded;
var typeOfChart=this.\u chart.config.type;
如果(转弯半径<0){
转弯半径=0;
}
如果(拐角半径的类型==“未定义”){
转弯半径=0;
}
如果(fullCornerRadius的类型==“未定义”){
fullCornerRadius=假;
}
如果(stackedRounded的类型=='undefined'){
stackedRounded=false;
}
如果(!vm.horizontal){
//酒吧
左=vm.x-vm.width/2;
右=vm.x+vm.width/2;
top=vm.y;
bottom=vm.base;
signX=1;
符号Y=底部>顶部?1:-1;
borderSkipped=vm.borderSkipped | | |“bottom”;
}否则{
//单杠
左=vm.base;
右=vm.x;
top=vm.y—vm.height/2;
底部=vm.y+vm.height/2;
signX=右>左?1:-1;
signY=1;
borderSkipped=vm.borderSkipped | | |“左”;
}
//画布不允许我们在宽度内划水,因此我们可以
//如果我们在直线上设置笔划,请调整尺寸以适合
如果(边框宽度){
//边框宽度应小于条宽和条高。
var barSize=Math.min(Math.abs(左-右)、Math.abs(上-下));
borderWidth=borderWidth>barSize?barSize:borderWidth;
var半笔划=边框宽度/2;
//当条顶位置接近vm.base(零)时,调整边框宽度。
var borderLeft=left+(borderSkipped!=“left”?半笔划*符号:0);
var borderRight=right+(borderSkipped!=“right”?-半笔划*signX:0);
var borderTop=top+(borderSkipped!=“top”?半笔划*符号:0);
var borderBottom=bottom+(borderSkipped!=“bottom”?-半笔划*符号:0);
//不成为一条垂直线?
if(borderLeft!==borderRight){
顶部=边界顶部;
底部=边界底部;
}
//不成为一条水平线?
if(borderTop!==borderBottom){
左=左;
右=右;
}
}
ctx.beginPath();
ctx.fillStyle=vm.backgroundColor;
ctx.strokeStyle=vm.borderColor;
ctx.lineWidth=边框宽度;
//角点,从左下到右下顺时针
// | 1 2 |
// | 0 3 |
变量角=[
[左,下],
[左,上],
[右上],
[右下]
];
//找到第一个(起始)角,回退到“底部”
var borders=[‘底部’、‘左侧’、‘顶部’、‘右侧’];
var startCorner=borders.indexOf(bo