在ChartJS上显示JSON文件

xkrw2x1b 于 2022-11-23 发布在 Chart.js

关注(0)|答案(1)|浏览(145)

我正在尝试使用chartJS在圆环图上显示JSON数据。我的问题是它只显示JSON中的一段数据。如何显示所有数据？代码如下：

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);
        var labels1 = datapoints.activePositions.map(function(e) {
            return e.positions;
        });
        var data1 = datapoints.activePositions.map(function(e) {
            return e.holders;
        });
        const insitutionalholders = document.getElementById('institutional_activepositions_piechart').getContext('2d');
        const insitutionalholdersforstock = new Chart(insitutionalholders, {
            type: 'doughnut',
            data: {
                labels: labels1,
                datasets: [{
                    label: 'yooooo',
                    data: data1,
                    backgroundColor: [
                        'rgba(0, 255, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(0, 255, 255, 1)'
                    ],
                    borderWidth: 2.5

                }]
            }
        });

    }
}

下面是我的JSON数据（需要的数据来自“activePositions”）：

{
    "activePositions": [
        {
            "positions": "Increased Positions",
            "holders": "1,799",
            "shares": "201,837,184"
        }, 
        {
            "positions": "Decreased Positions",
            "holders": "2,313",
            "shares": "226,754,389"
        }, 
        {
            "positions": "Held Positions",
            "holders": "306",
            "shares": "8,979,550,845"
        }, 
        {
            "positions": "Total Institutional Shares",
            "holders": "4,418",
            "shares": "9,408,142,418"
        }
    ], 
    "newSoldOutPositions": [
        {
            "positions": "New Positions",
            "holders": "122",
            "shares": "55,880,226"
        },
        {
            "positions": "Sold Out Positions",
            "holders": "74",
            "shares": "8,818,741"
        }
    ]
}

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">
</head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<body>

  <div class="myChartDiv">
    <canvas id="institutional_activepositions_piechart"></canvas>
  </div>
</body>
  <script src="AAPLpiechart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

让我感到奇怪的是，显示的数据是JSON中的第三部分，所以我不知道为什么会发生这种情况。

chart.js

来源：https://stackoverflow.com/questions/74500419/display-json-file-on-chartjs

1条答案

按热度按时间

qybjjes11#

该问题似乎与数据点的holders字段值有关。
不是包含“逗号”的数字（例如"holders": "1,799",）
您可以尝试删除逗号并解析为float：

var labels1 = datapoints.activePositions.map(function(e) {
        return e.positions;
    });
    var data1 = datapoints.activePositions.map(function(e) {
        return parseFloat(e.holders.replace(',','')); // remove comma
    });

EDIT：删除“合计”项：

const activePositions = datapoints.activePositions.filter(e => !e.positions.startsWith('Total')); 
    var labels1 = activePositions.map(function(e) {
        return e.positions;
    });
    var data1 = activePositions.map(function(e) {
        return parseFloat(e.holders.replace(',',''));
    });

赞(0）回复(0）举报 2022-11-23

我来回答

在ChartJS上显示JSON文件

1条答案

相关问题

热门标签

最新问答