javascript 如何在chatjs中使用边界半径

kokeuurv  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(133)

我已经在我的应用程序中使用了甜甜圈图,我需要边界半径,但不工作,我正在使用这个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)。你能告诉我吗?我怎么解决这个问题。

cigdeys3

cigdeys31#

您可以使用:
变量数据1 ={

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

    spacing: -300,

}

相关问题