glzmzd 2015-11-09 08:45 采纳率: 33.3%
浏览 2315

chart.js中环形图显示数据的宽度

chart.js绘制环形图，鼠标放在上面显示的数据，如何改变其显示宽度？

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-04 17:47
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    在使用Chart.js绘制环形图时，你可以通过设置radius属性来控制圆的大小。同时，你也可以通过设置innerRadius和outerRadius属性来调整内圈和外圈的比例。

    以下是一个简单的示例：

    <!DOCTYPE html>
<html>
<head>
    <title>Chart.js - Ring Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myRingChart" width="400" height="400"></canvas>

    <script>
        var ctx = document.getElementById('myRingChart').getContext('2d');
        var ringChart = new Chart(ctx, {
            type: 'ring',
            data: {
                labels: ['A', 'B', 'C', 'D'],
                datasets: [{
                    label: 'Data',
                    data: [10, 20, 30, 40],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    </script>
</body>
</html>

    在这个例子中，我们创建了一个环形图，并设置了data属性来表示数据。然后，我们设置了backgroundColor和borderColor属性来指定每个条目的颜色。最后，我们设置了responsive选项为true，以便图表可以适应不同的屏幕尺寸。

    当你点击环形图上的任何一点时，它将显示当前点的数据。如果你想要改变显示的数据宽度，你需要重新生成一个新的环形图。

    评论

报告相同问题？