如何在条形图中画圆圈
如何在条形图中画圆圈
提问于 2021-03-15 14:06:09
我是chart.js的新手，我想在条形图内画一个圆圈，或者在基线上画一个圆圈，比如下面蓝色的圆圈，我如何才能实现这一点，请帮助我提前谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-16 23:35:43
在现有条形图配置中，您可以定义type: 'scatter'的第二个dataset，如下所示：
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}请看一下下面的可运行代码，看看它是如何工作的。
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.5,
backgroundColor: "rgba(201, 203, 207, 0.2)",
borderColor: "rgb(201, 203, 207)",
borderWidth: 1
},
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});canvas {
max-width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66633062
复制相关文章
相似问题
腾讯云开发者
