网站开发图片压缩上传报酬个人网站建立教程

网站开发图片压缩上传报酬,个人网站建立教程,做网站一般需要哪些文件夹?,南京响应式网站设计网格组件#xff08;Grid Component#xff09; **Highcharts Grid ** 网格组件 作为 Highcharts 网格 的包装器#xff0c;可以放置在仪表盘的单元格中#xff0c;方便用户以表格形式可视化数据。继续阅读以了解如何在 Highcharts 网格 中嵌入 Highcharts 仪表盘#xf…网格组件Grid Component**Highcharts Grid ** 网格组件 作为 Highcharts 网格 的包装器可以放置在仪表盘的单元格中方便用户以表格形式可视化数据。继续阅读以了解如何在 Highcharts 网格 中嵌入 Highcharts 仪表盘或查看 Highcharts 网格 的完整文档。重要通知在 Dashboards 4.0.0 之前的版本中Grid Pro 与 Dashboards 一起打包。了解更多关于迁移到最新版本的信息请参阅我们的 迁移指南。如何开始1. 导入要在 Dashboards 中将Grid Pro* 作为组件使用您需要导入所需的模块grid-pro.js 和 dashboards.js并将它们绑定在一起。导入的顺序非常重要请确保在导入 Grid 模块之后再导入 Dashboards 模块。scriptsrchttps://code.highcharts.com/dashboards/datagrid.js/scriptscriptsrchttps://code.highcharts.com/dashboards/dashboards.js/script或者您也可以使用 NPM 包参见安装并导入它们以连接到 Dashboards。import*asDashboardsfromhighcharts/dashboards;import*asGridfromhighcharts/dashboards/datagrid;Dashboards.GridPlugin.custom.connectGrid(Grid);Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);2. CSS导入样式您还必须在主 CSS 文件中导入样式。importurl(https://code.highcharts.com/dashboards/css/dashboards.css);importurl(https://code.highcharts.com/dashboards/css/datagrid.css);3. 定义一个单元格标识符在加载必要的文件后使用一个唯一的标识符例如 dashboard-col-0定义一个单元格。这个单元格将用于在仪表盘中放置组件网格的内容将在这里渲染。gui:{layouts:[{id:layout-1,rows:[{cells:[{id:dashboard-col-0}]}]}]}4. 数据设置您还需要一些数据来在网格中显示。为此您可以例如定义一个包含 CSV 格式数据的连接器。dataPool:{connectors:[{id:data,type:CSV,options:{csv:Food,Vitamin A,Iron Beef Liver,6421,6.5 Lamb Liver,2122,6.5 Cod Liver Oil,1350,0.9 Mackerel,388,1 Tuna,214,0.6}}]}点击 这里 了解更多关于数据处理的信息。5. 渲染一旦你有了数据和组件的放置位置就可以像下面这样定义它。在renderTo选项中我们传递了单元格的ID如上所述或在布局中创建的以及在connector.id选项中带有数据的连接器ID第4点。为了让组件作为网格创建需将type选项设置为’Grid’。components:[{renderTo:dashboard-col-1,connector:{id:data},type:Grid}]若要查看更多关于网格组件的选项请点击 here.查看创建简单网格所需的简要 JavaScript 代码Dashboards.board(container,{dataPool:{connectors:[{id:data,type:CSV,options:{csv:Food,Vitamin A,Iron Beef Liver,6421,6.5 Lamb Liver,2122,6.5 Cod Liver Oil,1350,0.9 Mackerel,388,1 Tuna,214,0.6}}]},gui:{layouts:[{id:layout-1,rows:[{cells:[{id:dashboard-col-1}]}]}]},components:[{renderTo:dashboard-col-1,connector:{id:data},type:Grid}]});网格选项了解更多关于 网格文档 Grid documentation 的信息或者使用 API 文档 查看网格组件的可用选项。数据修改器数据修饰符允许对提供给连接器的数据进行操作以生成一个修改后的版本例如在Grid Component网格组件 中。数据修改器有不同的类型Chain- 一系列按固定顺序执行的修饰器。Invert- 反转修饰器会反转显示行的顺序。Range- 范围修饰符允许根据特定列的数据范围选择要显示的行。Sort- 排序修饰符允许根据特定列中数据排序的结果来设置行的显示顺序。Math- 数学修饰符允许创建额外的列这些列中的数据是从其他列经过数学变换得到的。可以在连接器选项中使用dataModifier选项示例如下connectors:[{id:data,type:CSV,options:{csv:A,B 1,3 20,2 100,2,dataModifier:{type:Math,columnFormulas:[{column:Sum,formula:A1B1}]}}}]在这个例子中创建了一个名为Sum的列其数据是该行中前几列数字的总和。请注意使用相应的修饰符还需要导入模块。例如scriptsrchttps://code.highcharts.com/dashboards/modules/math-modifier.js/script组件同步Grid Component网格组件的众多可用选项之一是sync选项它允许设置组件状态之间的同步。你可以在同步 sync 文章中找到更多相关信息。演示同步可以是一个配置对象包含highlight,visibility和extremes,它们允许通过传递值 true 或 false 来启用或禁用同步类型。以下 是sync演示Demo:Extremes Sync 极限同步Highlight Sync 高亮同步Visibility Sync 可见性同步高亮同步 Highlight sync 选项亮同步功能适用于 网格组件可以设置额外的选项Highlight sync for theGrid Componentcan have additional options:sync:{highlight:{enabled:true,autoScroll:true}}如果你希望自动滚动网格组件到高亮的行请开启autoScroll选项。Demo: