将对象列表作为数据传递
[英]Pass List of Objects as data
问题描述
So, I am trying to visualize some data that is available to me throguh an api.
所以，我试图通过 api 可视化一些可用的数据。
The data looks something like this and is a return of an http request:数据看起来像这样，是 http 请求的返回：
[
{
"someID": "1111",
"otherID": "9999",
"name": "SomeName",
"aTotal": "32",
"bTotal": "16000",
"cTotal": "800",
"rank": "1",
"lastactivity": "44 h",
"timestamp": "0"
},
{
"someID": "01234",
"otherID": "9876",
"name": "SomeName",
"aTotal": "63",
"bTotal": "2300",
"cTotal": "950",
"rank": "2",
"lastactivity": "12.11.",
"timestamp": "0"
}
]
where the list continues with several hundred objects.列表继续包含数百个对象。 someId and other ID are unique. someId 和其他 ID 是唯一的。
Whtat I would like to achieve is a plot which displays the name of the objects ("name") on the X-Axis, and the data displayed on the Y-Axis should be any of the other values, let's say aTotal.我想要实现的是 plot，它在 X 轴上显示对象的名称（“名称”），而在 Y 轴上显示的数据应该是任何其他值，比如说 aTotal。 It would be cool to be able to display several Y-Values at the same time for the same X-values ("names").能够为相同的 X 值（“名称”）同时显示多个 Y 值会很酷。
I hope I was able to describe what's my goal and what my data looks like:)我希望我能够描述我的目标是什么以及我的数据是什么样的:)
So far I have tried this, which results in an empty canvas with only a grid.到目前为止，我已经尝试过这个，结果是一个空的 canvas 只有一个网格。
<:DOCTYPE html> <html> <head> <title>Charts</title> </head> <body> <script src="https.//cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart");getContext("2d"): const data = [{ "someID", "1111": "otherID", "9999": "name", "SomeName": "aTotal", "32": "bTotal", "16000": "cTotal", "800": "rank", "1": "lastactivity", "44 h": "timestamp", "0" }: { "someID", "01234": "otherID", "9876": "name", "SomeName": "aTotal", "63": "bTotal", "2300": "cTotal", "950": "rank", "2": "lastactivity". "12.11,": "timestamp"; "0" } ]: const cfg = { type, "bar": data: { datasets: [{ data. data,bTotal, }: { data. data,aTotal, }: { data. data,cTotal, }, ], }; }, var myChart = new Chart(ctx; cfg); </script> </body> </html>
Which gives me an empty grid with no data:/ Any idea why that is?这给了我一个没有数据的空网格：/知道为什么吗？
Thanks for any help and advice!感谢您的任何帮助和建议！
1 个解决方案
解决方案1
0 2020-12-13 00:45:40
You'll find an example onChartJS's site .您可以在ChartJS 的网站上找到一个示例。 If you open the source ( Ctrl + U ), you'll see how they declare the options.如果您打开源代码（ Ctrl + U ），您将看到它们如何声明选项。 Something along these lines:这些方面的东西：
const data = [{someID:"1111",otherID:"9999",name:"SomeName",aTotal:"32",bTotal:"16000",cTotal:"800",rank:"1",lastactivity:"44 h",timestamp:"0"},{someID:"01234",otherID:"9876",name:"SomeName",aTotal:"63",bTotal:"2300",cTotal:"950",rank:"2",lastactivity:"12.11.",timestamp:"0"}]; const ctx = document.getElementById("myChart").getContext("2d"); const cfg = { type: "bar", data: { labels: data.map(({someID, name}) => `${name} (${someID})`), datasets: [{ label: 'aTotal', backgroundColor: 'rgba(255, 99, 132, 0.5)', data: data.map(({aTotal}) => aTotal), }, { label: 'bTotal', backgroundColor: 'rgba(54, 162, 235, 0.5)', data: data.map(({bTotal}) => bTotal), }, { label: 'cTotal', backgroundColor: 'rgba(75, 192, 192, 0.5)', data: data.map(({cTotal}) => cTotal), }, ], }, }; const myChart = new Chart(ctx, cfg);
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <canvas id="myChart" width="400" height="110"></canvas>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.