如何在chatjs中使用边框半径答案

【问题标题】：How to use border radius in chatjs如何在chatjs中使用边框半径
【发布时间】：2022-12-20 22:12:03
【问题描述】：

我在我的应用程序中使用了圆环图，我需要边框半径但不起作用，我正在使用这个 borderRadius:30, 你能解决这个问题吗？

$(function() {

    //get the doughnut chart canvas
    var ctx1 = $("#doughnut-chartcanvas-1");

    //doughnut chart data
    var data1 = {
        labels: ["match1", "match2", "match3", "match4", "match5"],
        datasets: [{
            label: "TeamA Score",
            borderRadius: 30,
            data: [10, 50, 25, 70, 40],
            backgroundColor: [
                "#DEB887",
                "#A9A9A9",
                "#DC143C",
                "#F4A460",
                "#2E8B57"
            ],
            borderColor: [
                "#CDA776",
                "#989898",
                "#CB252B",
                "#E39371",
                "#1D7A46"
            ]
        }]
    };


    //options
    var options = {
        responsive: true,
        title: {
            display: true,
            position: "top",
            text: "Doughnut Chart",
            fontSize: 18,
            fontColor: "#111",

        },
        borderRadius: 100,
        legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
        }
    };

    //create Chart class object
    var chart1 = new Chart(ctx1, {
        type: "doughnut",
        data: data1,
        options: options
    });
});

<!DOCTYPE html>
<html>
  <head>
    <title>ChartJS - Doughnut</title>
    <link type="text/css" rel="stylesheet" href="css/default.css" />
  </head>
  <body>
    <div class="chart-container">
      <div class="doughnut-chart-container">
        <canvas id="doughnut-chartcanvas-1"></canvas>
      </div>
    </div>

    <!-- javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
  </body>
</html>

enter image description here

我需要弯曲甜甜圈图中的每个角。那么如何在我们的代码中使用这些属性（outerStart、outerEnd、innerStart、innerRight）。你能告诉我吗？我该如何解决这个问题。

【问题讨论】：

borderRadius:30 似乎成功地改变了甜甜圈每个部分的半径。那不是您要更改的边界半径吗？
嗨 Rocky，感谢重播是的，我需要所有部分的边框半径如何修复请更改我的代码。
我不明白你想做什么。正如您通过运行上面的代码 sn-p 所见，代码已经成功更改了部分的边界半径。我很乐意提供帮助，但您需要更明确地说明您希望它做什么而它还没有做什么。
当您运行上面的 sn-p 时，请注意甜甜圈的每个部分都有圆角吗？这就是borderRadius 控制的。也许你想改变整个甜甜圈的大小？或者每个部分的边框宽度？请尽可能准确地说明您希望它以不同方式执行的操作。
如何在我们的代码中使用此属性（outerStart、outerEnd、innerStart、innerRight）我在上面附上了图片。

标签： javascript jquery

【解决方案1】：

您可以使用：
变种数据1 = {

    borderRadius: [{ innerEnd: 200, outerEnd:  200, innerStart: 200, outerStart: 200}],

    spacing: -300,

}

【讨论】：