Question

我想问一下可以在半甜甜圈图表上显示数据值吗？想要通过从数组中获取值，将数据值显示为图表底部的文本这是链接：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
    }
});

Answer 1

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
    }
});

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

<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>

自定义值

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

1 个答案: