基本上,上图是我想要的样子,下图是现在的样子。 我正在使用chart.js,但找不到底部边框半径的任何设置。 非常感谢帮助。
以下是图片更新,以回应以下评论:
我的代码:
<span class="innerclass">
var options= {
responsive: true,
maintainAspectRatio: true,
animation: {
easing: 'easeInOutQuad', duration: 520
}
,
scales: {
xAxes: [ {
gridLines: {
display: false, drawBorder: false
}
,
ticks: {
display: false
}
}
],
yAxes: [ {
gridLines: {
display: false, drawBorder: false
}
,
ticks: {
display: false
}
}
]
}
,
elements: {
labels: {
display: false
}
}
,
legend: {
display: false,
labels: {
display: false
}
}
,
point: {
display: false
}
答案 0 :(得分:1)
您只需在canvas
元素上使用border-radius
即可实现:
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ["", "", "", "", ""],
datasets: [{
data: [1, 2, 1, 2, 1]
}]
},
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>