Utils的输出格式是什么？ （在 vanillajs 中使用 chartjs，而不是 react/angular）

Question

我正在尝试从数据文件加载气泡图的数据，示例使用 chartjs 函数生成数据。

完成一些示例，想要通过 d3.js 加载 csv/json 文件，因为将使用来自 api 的数据文件和不在 react/angular 中的前端.

到目前为止的例子。 https://github.com/aspiringguru/chartjs_3.7.1_vanilla

我看不到示例中使用的 Utils.* 的输出格式。

预计每个点都需要 x、y、半径。只需要弄清楚 chartjs 期望数据的格式。

https://www.chartjs.org/docs/next/samples/other-charts/bubble.html 使用

data: Utils.bubbles(NUMBER_CFG)

dataset.data = Utils.bubbles({count: chart.data.labels.length, rmin: 5, rmax: 15, min: 0, max: 100});

看过了 https://github.com/chartjs/Chart.js/blob/master/docs/scripts/utils.js 我无法理解

生成的输出

function bubbles(config)

Answer 1

可以在文档中阅读 here。气泡图的数据结构由一个包含对象的数组组成，其中每个对象都有一个 x 键表示 x 值，一个 y 键表示 y 值，一个 r 键表示半径。

{
    // X Value
    x: number,

    // Y Value
    y: number,

    // Bubble radius in pixels (not scaled).
    r: number
}

const data = [{x: 5, y: 7, r: 9}, {x: 6, y: 3, r: 1}];