!!!###!!!title=fillSpecWithData——VisActor/VMind 接口文档!!!###!!!

fillSpecWithData

接口描述:

fillSpecWithData用于向spec模板中填入数据,以生成一个完整的spec。根据图表类型的不同,将采取不同的填充策略。

接口参数:

fillSpecWithData(
  spec: any,
  dataset: Array<Record<string, any>>,
  totalTime?: number
  )
  • spec (any): spec模板,包含除data之外的所有属性。可通过generateChart生成
  • dataset (Array): 图表中使用的数据集,会被填充到spec模板中。
  • totalTime (number): 可选项,图表动画时长(ms)

返回值:

返回填充后的spec,可直接用于图表渲染

使用示例:

某些情况下我们可能在仅有数据字段,没有具体的数据集的情况下生成图表(例如在查询前根据数据集中的字段生成一个图表,再根据生成的图表类型、图表中的字段完成相关查询),此时可在调用generateChart方法时不传入dataset,生成spec模板,随后再调用fillSpecWithData方法,获得最终的spec用于图表渲染:

import VMind from '@visactor/vmind';

const vmind = new VMind(options)

const userPrompt = '展示不同地区商品销售额';
const fieldInfo = [
    {
        "fieldName": "商品名称",
        "type": "string",
        "role": "dimension",
        "domain": [
            "可乐",
            "雪碧",
            "芬达",
            "醒目"
        ]
    },
    {
        "fieldName": "region",
        "type": "string",
        "role": "dimension",
        "domain": [
            "south",
            "east",
            "west",
            "north"
        ]
    },
    {
        "fieldName": "销售额",
        "type": "int",
        "role": "measure",
        "domain": [
            28,
            2350
        ]
    }
]
//不传入dataset,生成spec模板
const { spec } = await vmind.generateChart(userPrompt, fieldInfo);

//向模板中填入数据
const dataset = [
    {
        "商品名称": "Coke",
        "region": "south",
        "销售额": 2350
    },
    {
        "商品名称": "Coke",
        "region": "east",
        "销售额": 1027
    },
    {
        "商品名称": "Coke",
        "region": "west",
        "销售额": 1027
    },
    {
        "商品名称": "Coke",
        "region": "north",
        "销售额": 1027
    }
]

const spec = vmind.fillSpecWithData(spec, dataset)

相关教程