Highcharts Grid / 网格产品选项详解|官方使用文档说明

理解 Highcharts Grid

在其核心,网格由一个数据源组成,该数据源以一定数量的列和行进行渲染。许多可用的配置选项适用于列以及它们对应的行和标题单元格。

以下内容介绍了网格中各种根配置对象

dataTable 数据表

js 复制代码
{
    dataTable: {
        columns: {
            product: ["Apple", "Pear", "Orange", "Banana"],
            weight: [182, 178, 150, 120],
            price: [3.5, 2.5, 3, 2.2],
            vitamin_a: [54,27,225,64]
        }
    }
}

dataTable 对象是确保网格正确渲染的唯一必需选项,而dataTable.columns 则创建了DataTable类的实例。这个类具有键值对,其中键用于标题单元格,值是对应行单元格的值数组。

了解更多关于 数据处理和 DataTable 类信息。

Data modifiers 数据修改器

除了可序列化的选项外,你还可以传递一个对你在渲染网格时想要使用的 数据表DataTable 的引用。例如,你可以提前应用 Highcharts 仪表板库中的 数学修饰器Math Modifier ,以添加一列新列,其值是对一个或多个现有列进行数学运算的结果。

您可以在 here阅读更多关于数据修器 Data Modifiers.

columnDefaults and columns[ ]

js 复制代码
{
    columnDefaults: {
        cells: {
            editMode: {
                enabled: true
            }
        }
    },
    columns: [{
        id: "weight",
        header: {
            format: "Weight"
        },
        cells: {
            format: "{value}g",
            editMode: {
                enabled: false
            }
        }
    }, {
        id: "price",
        header: {
            format: "Price"
        },
        cells: {
            format: "${value}"
        }
    }]
}

columnDefaults 对象定义了网格中所有列的默认选项,例如列排序器、列调整大小器、值编辑器、单元格格式等,columns[]数组中的对象可以在需要时用来覆盖特定列的默认设置。请注意,columnDefaults中的大多数选项在columns[]数组中的对象中也会一一对应。

了解更多关于 columns[] 的信息,请参阅我们的Columns article 或查看 API 参考文档中的 columnDefaults and columns[].

caption 标题

js 复制代码
{
    caption: {
        text: "Title of the Grid";
    }
}

上面的代码片段展示了如何在网格上方插入标题或标题栏。

有关 caption 选项的更多信息,请参阅 API reference.

header[ ]

js 复制代码
{
    header: [
        {
            columnId: "product"
            format: "Fruit",
        },
        "weight",
        "price"
    ]
}

虽然可以通过 columns[] 选项设置单个列及其标题单元格的格式和可见性,但同样可以使用 header[] 根选项实现。使用哪个选项取决于您的具体用例,在某些情况下, header[] 会比 columns[] 更简洁。

此外,header[ ]选项还可以更改表头和分组表头的顺序,形成层次结构。

Header 文章 提供了关于header[]的更多信息。

.

accessibility 可访问性

js 复制代码
{
  accessibility: {
    enabled: false,
    ...
  }
}

可以使用 accessibility 选项对象来启用或禁用无障碍功能,例如 ARIA 属性和 ARIA 实时通知。

有关无障碍选项的更多信息,请阅读我们的文档文章 无障碍 accessibility.

lang 语言

要自定义ARIA属性和播报器的默认语言或措辞,请使用lang.accessibility 选项。在当前版本的Highcharts Grid中, lang 选项仅与无障碍 accessibility相关,但随着我们添加更多功能,将会扩展到其他用例。请通过访问我们的更新日志changelog和路线图roadmap保持最新信息。

rendering 渲染

The rendering option object can be used to configure options related to performance and the rendering of the Grid. Example: Rendering.rows represents the rows in the Grid.
rendering 选项对象来配置与性能和网格渲染相关的选项。例如:Rendering.rows 表示网格中的行。

js 复制代码
{
    rendering: {
        rows: {
            bufferSize: 5,
            strictHeights: true
        }
    }
}

有关渲染选项的更多信息,请阅读我们的文章Performance and renderingAPI reference.

Pagination 分页

pagination 选项对象允许您将大型数据集拆分成易于管理的页面,从而提升性能和用户体验。启用后,分页会显示部分数据,并配有导航控件。

js 复制代码
{
    pagination: {
        enabled: true,
        pageSize: 25,
        position: 'bottom',
        controls: {
            pageSizeSelector: {
                enabled: true,
                options: [10, 25, 50, 100]
            },
            pageInfo: {
                enabled: true
            },
            firstLastButtons: {
                enabled: true
            },
            previousNextButtons: {
                enabled: true
            },
            pageButtons: {
                enabled: true,
                count: 5
            }
        }
    }
}

分页控件包括页面大小选择、页面信息显示、首页/末页按钮、上一页/下一页按钮以及编号页面按钮。您还可以配置分页事件(在 Grid Pro 版本中)以响应页面变更和页面大小调整。

有关分页选项和事件的更多信息,请参阅 PaginationAPI reference.

events 事件

Highcharts Grid Pro 支持多种事件监听器,可以添加到表头、列和单元格。这些提供了自定义功能并扩展了表格的可用性。更多关于事件的内容,请阅读Events article.

setOptions() 设置选项

在同一页面添加多个网格时,建议使用 setOptions() 全局设置默认选项。这种方法比逐个配置每个网格更高效。有关所有默认选项的概述,请参阅API参考 API reference.

js 复制代码
Grid.setOptions({
    columnDefaults: {
        sorting: {
            sortable: false
        }
    }
})

这个示例禁用了页面上每个网格的最终用户排序功能。

相关推荐
Highcharts.js20 小时前
Highcharts Grid 表格/网格安装 |官方安装文档说明
开发语言·javascript·表格组件·highcharts·官方文档·安装说明·网格组件
Highcharts.js24 天前
从旧版到新版:Highcharts for React 迁移全攻略 + 开发者必知的 5 大坑
前端·react.js·前端框架·编辑器·highcharts
Highcharts.js25 天前
Dashboards 集成 Highcharts 图标组件及数据连接使用说明
开发文档·组件库·highcharts·仪表板组件·数据链接
Highcharts.js1 个月前
Highcharts Dashboards 之明和暗主题设置使用文档
开发文档·highcharts·使用文档·dashboards·明暗设置
Highcharts.js1 个月前
官方文档|Angular 框架集成 Highcharts Dashboards
前端·javascript·angular.js·highcharts·看板·使用文档·dashboards
Highcharts.js1 个月前
Highcharts Dashboards 看板组件类型使用文档说明
技术文档·highcharts·dashboards·看板组件
Highcharts.js1 个月前
Highcharts Dashboards 仪表板布局的使用文档
开发文档·布局·仪表板·highcharts·dashboards
Highcharts.js1 个月前
(最新)Highcharts Dashbords 仪表板 网格组件(Grid Component)使用文档
开发文档·仪表板·grid·highcharts·dashboards·包装器·网格组件
Highcharts.js1 个月前
官方文档|Vue 集成 Highcharts Dashboards
前端·javascript·vue.js·技术文档·highcharts·看板·dashboards