包含未知数据集的chart.js折线图

7y4bm7vi  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(155)

我已经找到了大量关于如何构建Chart.Js折线图的示例，这些折线图具有多条线，但所有这些折线图都具有固定数量的数据集。
我想做的是让x轴是天，y轴是多个整数......但是在开发的时候，我不知道有多少行。
下面是json的一个示例：

[
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 67
    },
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 47
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 47
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 46
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 71
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 71
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    }
]

在这个例子中，只有3个账户状态，但是有些客户有3个，有些客户有10个或更多。那么我如何配置它来构建折线图来满足所有这些状态呢？
下面是我的尝试，你可以看到我在数据集中的注解：

function createLineChart(data) 
    {
        let xValues = data.map(data => {
          return  data.snapShotTS
        })

        new Chart("myChart", {
          type: "line",
          data: {
            labels: xValues,
            datasets: [               
                // How to build this dynamically?
            ]
          },
          options: {
            legend: {display: false}
          }
        });
    }

我可以硬编码这3个帐户的状态在那里，它会为这个客户端，但不是为不同的客户端的状态。
先谢了。
附言。这里是一个图像如何看它需要与3个数据集。我们只需要有它与X个数据集。

chart.js

1条答案

按热度按时间
14ifxucb

14ifxucb1#

你想在图表中显示每个帐户状态的帐户数吗？这里是一个简化版本，请看：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  var accounts = [{
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Casual",
      "accountCount": 48
    },
    {
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Direct Debit",
      "accountCount": 67
    },
    {
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Staff",
      "accountCount": 6
    }
  ]

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: accounts.map(acc => acc.accountStatus),
      datasets: [{
        label: '# account counts',
        data: accounts.map(acc => acc.accountCount),
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

</script>
赞(0）分享  回复(0）举报  2023-03-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com