Javascript 自定义Chart.js

因此，我一直在努力理解Chart.js的文档，但对于新手来说，理解如何定制某些东西实际上并不友好

我已经安装了插件，但它不是我想要的可定制插件，我尝试使用

CSS

，但由于它是一个画布，你不能做太多

我试图实现这个设计，从我的mysql数据库中添加数据并将其显示在图表上，除了设计图表之外，我还可以理解如何完成其余的工作

我正在努力实现的目标。

---

我认为使用chart.js和圆角边框可以得到的最接近的答案是：

但是它在负值的情况下效果不太好

Chart.helpers.drawRoundedTopRectangle=函数（ctx、x、y、宽度、高度、半径）{
ctx.beginPath（）；
ctx.移动到（x+半径，y）；
//右上角
ctx.lineTo（x+宽度-半径，y）；
ctx.直角曲线（x+宽度，y，x+宽度，y+半径）；
//右下角
ctx.lineTo（x+宽度，y+高度）；
//左下角
ctx.lineTo（x，y+高度）；
//左上角
ctx.lineTo（x，y+半径）；
ctx.二次曲线（x，y，x+半径，y）；
ctx.closePath（）；
};
Chart.elements.RoundedTopRectangle=Chart.elements.Rectangle.extend({
绘图：函数（）{
var ctx=此值。\u chart.ctx；
var vm=此视图；
变量左、右、上、下、signX、signY、borderSkipped；
var borderWidth=vm.borderWidth；
如果（！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）{
左=左；
右=右；
}
}
//计算钢筋宽度和圆度
var barWidth=Math.abs（左-右）；
var roundness=this._chart.config.options.barRoundness | | 0.5；
var半径=棒宽*圆度*0.5；
//跟踪酒吧的原始顶部
var prevTop=顶部；
//向下移动顶部，以便有空间绘制圆形顶部
顶部=顶部+半径；
var barRadius=顶部-顶部；
ctx.beginPath（）；
ctx.fillStyle=vm.backgroundColor；
ctx.strokeStyle=vm.borderColor；
ctx.lineWidth=边框宽度；
//绘制圆形顶部矩形
图表。助手。drawRoundedTopRectangle（ctx，左，（顶部-barRadius+1），barWidth，底部-prevTop，barRadius）；
ctx.fill（）；
如果（边框宽度）{
ctx.stroke（）；
}
//恢复原始顶部值，以便工具提示和比例仍然有效
top=prevTop；
},
});
Chart.defaults.roundedBar=Chart.helpers.clone（Chart.defaults.bar）；
Chart.controllers.roundedBar=Chart.controllers.bar.extend({
dataElementType:Chart.elements.RoundedToProctAngle
});
//*********//
常数d1=[65,59,80,81，-40,56,55,40]；
const setColor=data=>data<0？“#ff4433'：'#3377ee'；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”]，
数据集：[
{
标签：“我的第一个数据集”，
背景颜色：d1.地图（setColor），
边框颜色：d1.贴图（设置颜色），
数据：d1
},
],
};
变量选项={
scaleBeginAtZero:错误，
回答：是的，
基础：1，
比例：{
雅克斯：[{
滴答声：{
建议民：-70，
建议最大值：100
}
}]
}
};
const ctx=“myChart”；
const chart=新图表（ctx，{type:'roundedBar'，data，options}）
对于圆角边框，您可以使用新版本3的库，它本机支持它

对于红色条，如果它们是负数，则可以传递一个包含所有颜色的数组作为背景色，对于数据为负数的每个索引，将其更改为红色。应该有用

圆角示例：
您要查找的是条形图。下面是一个例子：首先尝试让它运行起来，然后带着一个特定的问题返回。现在你的问题太宽泛了，我们不是来为你写代码的。我不是来这里寻找勺子式的代码，我只是在寻求指导方针或指向正确方向的指针，我已经设法用mysql的数据显示了我的图表。