使用Chart.js展示JSON数据仅显示单个数据项的问题咨询

你的环形图只显示单一项数据，且仅能识别第三项，核心原因有三个：

1. 数据类型不兼容：JSON里的holders是带千分位逗号的字符串（比如"1,799"），Chart.js绘制图表需要纯数字类型，带逗号的字符串转数字会变成无效的NaN，Chart.js会自动忽略这些无效数据，只有不带逗号的"306"能被正常识别，所以只显示这一项。
2. 颜色数组长度不足：backgroundColor和borderColor仅定义了一个颜色值，即使数据正常，所有切片也会是同一种颜色，无法区分不同类别。
3. 重复引入库导致冲突：HTML里重复加载了多个不同版本的Chart.js，会引发库方法冲突，导致未知异常。

修复后的JS代码 #

const xmlhttp = new XMLHttpRequest();
const url = 'https://api.npoint.io/c189874f4d8f7c14d816';

xmlhttp.open('GET', url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        const datapoints = JSON.parse(this.responseText);
        // 提取标签
        const labels1 = datapoints.activePositions.map(e => e.positions);
        // 处理数据：移除千分位逗号并转为整数
        const data1 = datapoints.activePositions.map(e => {
            return parseInt(e.holders.replace(/,/g, ''), 10);
        });
        // 定义与数据数量匹配的颜色组
        const bgColors = [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)'
        ];
        const borderColors = [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
        ];
        const chartCtx = document.getElementById('institutional_activepositions_piechart').getContext('2d');
        new Chart(chartCtx, {
            type: 'doughnut',
            data: {
                labels: labels1,
                datasets: [{
                    label: '机构持仓持有者数量',
                    data: data1,
                    backgroundColor: bgColors,
                    borderColor: borderColors,
                    borderWidth: 2.5
                }]
            }
        });
    }
}

修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="draftfortesting.css">
    <!-- 仅保留一个最新版本的Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
<body>
  <div class="myChartDiv">
    <canvas id="institutional_activepositions_piechart"></canvas>
  </div>
  <!-- 自定义脚本放在body末尾加载 -->
  <script src="AAPLpiechart.js"></script>
</body>
</html>

额外提示 #

• 如果需要展示shares字段的数据，同样需要执行移除千分位逗号、转换为数字的处理。
• 颜色可以根据需求自由调整，只要保证颜色数组的长度与数据数组一致即可。

内容的提问来源于stack exchange，提问作者kiestuthridge23