如何在 Chart.js 上显示半甜甜圈中的数据值

Question

如何在 Chart.js 上显示半甜甜圈中的数据值

我想问一下是否可以在半圆环图上显示数据值？想要通过从这里的数组中获取其值来将数据值显示为图表底部的文本是链接：https : //jsfiddle.net/z638ttv0/16/

我在这里先向您的帮助表示感谢

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red"],
        datasets: [{
            label: '# of Votes',
            data: [50,100-50],
            backgroundColor: [

                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [

                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Alf*_*aul 5

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red"],
        datasets: [{
            label: '# of Votes',
            data: [50,100-50],
            text: "ff",
            backgroundColor: [
             
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
               
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

Run Code Online (Sandbox Code Playgroud)

.test
{
  position:absolute;
  bottom:-20px;
  left:calc(50% - 10px);
  display:block;
}

Run Code Online (Sandbox Code Playgroud)

<body>
<span class="test">test</span>
  <canvas id="myChart" width="400" height="400"></canvas>
  

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

</body>

Run Code Online (Sandbox Code Playgroud)

定制价值

归档时间：	8 年，11 月前
查看次数：	9742 次
最近记录：	8 年，11 月前