单元格显示图表

上一篇文章我们介绍了如何在单元格中显示迷你图，迷你图可以做简单的趋势分析和样式配置，如果想要将功能更强大的图表VChart在表格中应用，请看这篇教程。

注入图表组件

在使用之前需要先注入使用的图表库组件：

import VChart from '@visactor/vchart';
VTable.register.chartModule('vchart', VChart);

关于为什么注册VChart需要配置个名称'vchart'？我们是有打算接入其他图表库的计划的哈。

chart图表数据

chart图表数据来源于设置到table的records，如果是基本表格数据可设置如下：

[
    {
        "personid": 1,
        "areaChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}],
        "scatterChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130}]]
    },
    {
        "personid": 2,
        "areaChart": [{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130}],
        "scatterChart": [{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 120},{"x": "0","type": "A","y": 130},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 111}{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100},{"x": "0","type": "A","y": 100}]
    }
]

我们的records中有三个字段：persionid，areaChart，scatterChart，其中areaChart和scatterChart是两个需要提供给chart使用的数据。

示例

我们利用如上数据使用不同的spec展示不同的图表效果：

通过以上介绍和示例，我们可以在VTable中快速创建并配置表格展示类型sparkline迷你图。虽然目前仅支持折线图，但随着后续的开发，迷你图的功能和类型将愈发完善，为数据可视化提供更多便捷实用的功能。

单元格显示图表

注入图表组件

单元格显示图表

注入图表组件

相关配置

chart图表数据

示例