时间戳

首页 > 解决方案 > 如何将数组分配给charts.js的计数数据

javascript - 如何将数组分配给charts.js的计数数据

问题描述

我有一个图表chart.js，我想分配一个arraydata

这是我当前的代码

datasets: [
    {
      data:[40,56,345,2354],
      backgroundColor: "#007BA7",
      hoverBackgroundColor: "#00CC99"
    }
]

但我想使用arraywhich has listof products。这就是我正在做的，但它不起作用

datasets: [
    {
      data: this.lastSeenDeviceCount.forEach(element => {
        element.length
      }),
      backgroundColor: "#007BA7",
      hoverBackgroundColor: "#00CC99"
    }
]

这是数据源信息

this.lastSeenDeviceCount.push(activeRecords,offlineRecords, pendingRecords);
//array has this object
{
    "DeviceID": "52",
    "FriendlyName": "Net RC",
    "UserName": "UserNet",
    "LastSeen": "07/23/2020 23:18:05",
}

标签： javascriptangulartypescriptchart.js

解决方案

你可以这样做;

let devices = []; // array to store all devices
this.lastSeenDeviceCount.forEach(element => {
  devices.push(element.length)
})

datasets: [
  {
    data: devices,
    backgroundColor: "#007BA7",
    hoverBackgroundColor: "#00CC99"
  }
]

这里发生的是；

  1. 您创建了一个数组
  2. 您从循环逻辑中填充了数组
  3. 然后将数组的值传递给 chartJs数据属性以填充图表

推荐阅读