如何在 VEGA 条形图中设置数据源？

问题描述

我正在关注basic VEGA tutorial where a Barchart is rendered。只要所有数据都在首次加载的 JSON 设置文件中，此方法就有效。但是教程说数据源也可以这样设置：

使用 url 属性从网络加载（包括 JSON 和 CSV 文件），
使用源属性从先前定义的数据集派生，或
未定义并在构建可视化时动态设置。

我将选择最后一个选项，即在我的 javascript 文件中设置数据。但我的尝试都没有奏效。不呈现任何数据。如何在 VEGA 图表中动态设置数据源？

let testData = [
    {"category": "A","amount": 66},{"category": "B","amount": 33}
]


fetch('tablespecs.json')
    .then(res => res.json())
    .then(spec => render(spec))
    .catch(err => console.error(err))


function render(spec) {
    let view = new vega.View(vega.parse(spec),{
        renderer: 'canvas',container: '#view',hover: true,source:testData                       // not working
    })

    view.source = testData                    // not working
    view.data.source = testData               // not working
    view.data = testData                      // not working

    view.runAsync()
}

表格规格直接从教程页面复制。我只是遗漏了 values 属性。我还尝试省略了整个 data 属性。

规范 JSON

{
    "$schema": "https://vega.github.io/schema/vega/v5.json","width": 400,"height": 200,"padding": 5,"data": [
        {
            "name": "table",// removed values here
        }
    ],// ... rest of barchart specs unchanged from example
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript vega