有什么表格组件可以在单元格中支持显示迷你图吗？

Question

希望可以在销售统计表格中有单独一列来显示迷你折线图以体现显示的增长趋势。类似股票的日K线列表:

Answer 1

后端返回 base64 然后输出到 img

Answer 2

https://omnipotent.net/jquery.sparkline/#s-about

或者搜索 sparkline js 关键字

Answer 3

解决方案 Solution

可以使用VTable组件来配置columnType: "sparkline"，将单元格类型显示成迷你图。设置迷你图的具体样式可以设置sparklineSpec来实现。优势是：图和表融为一体没有割裂感，性能上体验感最佳。

代码示例 Code Example

代码参考 Code Example

const columns: VTable.ColumnsDefine = [
    {
    field: "trend",
    caption: "bird count",
    columnType: "sparkline" ,
    width: 300,
    sparklineSpec: {
      type: "line",
      xField: "x",
      yField: "y",
      pointShowRule: "none",
      smooth: true,
      line: {
        style: {
          stroke: "#2E62F1",
          strokeWidth: 2
        }
      },
      point: {
        hover: {
          stroke: "blue",
          strokeWidth: 1,
          fill: "red",
          shape: "circle",
          size: 4
        },
        style: {
          stroke: "red",
          strokeWidth: 1,
          fill: "yellow",
          shape: "circle",
          size: 2
        }
      },
      crosshair: {
        style: {
          stroke: "gray",
          strokeWidth: 1
        }
      }
    }
  }
  ...
];

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-list-table-jw8yr8?file=/src/i...

相关文档 Related Documentation

迷你图相关教程：https://visactor.io/vtable/guide/cell_type/sparkline

相关demo：https://visactor.io/vtable/demo/cell-type/multi-type

相关api：https://visactor.io/vtable/option/ListTable-columns-sparkline...

github：https://github.com/VisActor/VTable

Answer 4

在许多数据可视化库和框架中，都有支持在单元格中显示迷你图的表格组件。以下是一些常见的选项：

1. DataTables（jQuery插件）：DataTables是一个灵活的表格插件，可以与jQuery库结合使用。它支持自定义单元格渲染，并可以集成各种数据可视化图表库，以在单元格中显示迷你图。
2. Handsontable：Handsontable是一种适用于Web应用程序的JavaScript/HTML5的可编辑表格组件。它提供了自定义单元格渲染的选项，并且与许多常见的数据可视化库（例如Highcharts、Chart.js等）集成良好。
3. React-table：React-table是一个适用于React应用程序的灵活和可定制的表格组件。它支持自定义单元格渲染，因此可以使用任何支持图表的React组件（例如Recharts、React-vis等）来在单元格中显示迷你图。
4. AG Grid：AG Grid是一个功能强大的JavaScript表格库，可以用于构建高性能的数据网格。它具有自定义单元格渲染的功能，并且可以与其他数据可视化库（例如Highcharts、Chart.js等）集成，以在单元格中显示迷你图。

这只是一些常见的选项，当然还有其他的表格组件和数据可视化库可以实现在单元格中显示迷你图的需求。选择最合适的组件取决于您的具体技术栈和项目要求，请根据自己的需求进行进一步的研究和比较。