㈠ 网页端表格设计指南
想象一下你为企业端产品设计了一个系统，或是设计了某个应用程序。在诸如此类的设计中都需要用到表格。这些表格设计不是那些设计网站中展示的非常精美的表格样式，而是具有复杂交互和数百个单元格的表格。
在这种情况下，设计师会面临许多挑战。 例如：将设计与现有的前端框架进行匹配，或与破坏布局的“不舒服”数据进行斗争。 我们将通过以下步骤来解决这些问题：系统化需求，原子化，定义交互。
所以，你已经采访了目标受众。现在是时候将他们的需求和需求拼凑在一起，并转化为对设计有用的东西。例如，一位用户说：“我需要看看我的数据如何影响应用程序的其他部分。”或者在看到另一个人使用软件时，你注意到他只使用快捷方式而根本不摸鼠标。这是什么意思？第一个用户的话是关于输入验证和提示。你需要考虑将警报或帮助信息附加到表中，或者开发一个有意义的颜色系统。这取决于领域和心理模型。观察第二个用户的工作可能是你需要设计键盘可设置快捷方式，可能需要考虑比“Cmd + C”和“Cmd + V”更深刻的快捷方式。
这样，你就有一系列的需求和愿望。开放式问题有助于找出真正的需求并过滤掉一时兴起。例如，“什么可以帮助你更快地工作？这如何提高你的工作效率？如果你不能做XX会有什么改变？“
这时候就需要一个功能框架了。如下图
任何表的最小构建块都是一个单元，联合成行和列，其具有不同于其他单元的特定特征。 最后，我们将表格的重要补充作为顶栏，键盘命令，处理错误等。
简而言之，构建一个复杂的表，收集并优先考虑用户需求。 考虑非表格解决方案，例如图表。
绘制一张树形图，系统化所有需要的功能。
原子化是首先设计小的UI组件然后组装更大的UI组件。 我们将逐渐从字体和颜色等基本粒子转移到像标题或列这样的大模态。
这些部分可以由设计系统或UI框架定义。 如果为现有产品创建表，请检查调色板，字体和图标是否满足表格的需要。
当表格原子设计准备就绪时，我们可以继续设计不同类型的单元。 首先要事先考虑每个元素的“正常”，“悬停”和“激活”的状态。 后面再添加“点击”，“禁用”和其他状态。
单元格可以有工具提示，输入提示，错误消息，占位符等附件。
设计单元格创建行时，需要查看各种组合是否可以很好地协同工作。 下面我在一行中展示了只读和可编辑单元格的。 一旦设计一个具有复杂编辑逻辑的表格，那么表格的某些字段由用户提供，而其他字段则使用默认值自动计算或填充。
需要注意的是，将鼠标悬停在只读和可编辑单元格上时，光标会有所不同。 点击单元格会触发选择行或进入可编辑单元格的编辑模式。 你可以在下图看到用户选择一行或多行时的单元格状态。
现在是时候考虑表头了。 根据我的经验，通常无法控制列标题长度并坚持一行。 我在下图展示了表头的不同变体。
基于数据的工具，用户经常需要排序和过滤。 它可以帮助用户在冗长的数据中找到有价值的信息。 排序和过滤的挑战是将排序控件和过滤控件与其他标题元素（列标题，度量单位等）结合起来。
与表格单元格不同，过滤器框通常在右侧具有“重置”图标，以便用户可以查看未过滤的内容。
在示例中，有三种类型的过滤器框。 字母数字过滤器可以按字母和数字进行搜索。 它支持通配符 - 未知数量的未知字符。
日期选择器过滤器具有日历，其工作方式与其单元格相同。 允许用户手动输入日期并从日历中选择是一件好事。 如果他们知道他们在搜索什么，那么打字比点击容易得多。 在我的一个项目中，我们允许输入“01/25/2017”，“6 12 17”和“2016年9月4日”等日期，仅过滤一个月或一年。
复杂表的一个常见功能是固定列。 通常，包含关键信息的列（例如，元素名称或状态）不可滚动。
虽然表列应该巧妙地适应内容大小，但是当文本被截断时会发生。 在这种情况下，列大小调整很有帮助。 用户可以拖动列边缘并查看长内容。
处理长文本字符串的另一种方法是：使用最长内容拉伸列或将内容折成多行。 第一种方法对于或多或少类似的文本字符串更有效。 如果看到全部内容对于人们来说比保持表格的垂直紧凑更重要，那么第二个更好。
我们需要定义列的默认最小宽度，以防止表格不适合调整大小。
什么构成一张表格？ 单元格，列，行。 此外，复杂的表通常有一个顶部操作区。 与其他组件一样，顶部栏由较小的元素构成 - 标题和命令。 下面我收集了我们在其中一个产品中使用的各种状态的命令列表。
现在我们可以尝试组合不同的元素，看看它是否有效。 这里有些例子。
当然，这不是功能和元素的最终列表。 它不同于一个项目，可能包含其他内容，例如：
按多列排序;
可自定义的列;
可扩展行;
用于过滤和搜索的逻辑运算符（“和”，“或”，“其他”等）。
如果你犹豫要设计哪些功能，哪些没有，可以参考奥卡姆的剃刀，或简约法则。 如果现有的实例满足需求，则设计者不应创建新实例。 你应该“削减”用户可能需要的令人讨厌的功能。
只读表格 。 要构建的最简单的表类型，因为它只显示数据。 没有过滤或编辑选项。
搜索表格 。 单元格不可编辑，标题有过滤框和排序控件，可以选择行。 从实践来看，这些表格有助于从大量类似的东西中查找，比较和选择一个项目或几个项目。
可编辑的表格 。 所有或部分单元格都是可编辑的，通常没有筛选，因为行的顺序可能是自定义的。 这些表格通常会有工具栏并允许使用行执行操作。
简而言之
从最小的组件开始。 然后逐渐走向更大的，最后，模拟整个表格。
事先考虑每个组件的所有可能状态。
使用Occam的剃刀原则将元素数量保持在最小但覆盖所有用例。
构建块不足以构建像表格这样复杂的。设计师应该考虑“游戏规则”，并设计视觉部分背后的逻辑原则和惯例。
容器与响应式
如何将表格放在界面中？ 例如，它会占用现有容器中的一些空间还是一个单独的模块？ 这些问题的答案完全取决于产品，最好预见可能的问题并彻底定义原则。
有些应用程序使用线条或白色灰色“斑马线”来使信息更易读。
定义合理的默认宽度，并允许在需要时手动调整大小。对于阅读表格，最好在右边有一些空格而不是列之间的间隙。但是如果一个表包含许多行和列，则水平和垂直滚动是不可避免的。对于手机端的阅读，还可以把表格做成卡片式利于用户浏览数据。
即使是非常流畅和漂亮的表格也可能成为用户的噩梦。因此，遵循可访问性原则非常重要。 以下是可访问性方面的主要设计考虑因素。
给出标题并准备简明的摘要 。视力受损的用户应该能够在不对其所有单元进行语音处理的情况下处理表格。
注意字体大小 。尽管网络没有正式的最小尺寸，但16 px（12 pt）被认为是最佳的。此外，用户应该能够在不破坏整个布局的情况下将表格增加到200％。
为有色盲的人测试颜色 。文本和控件应与其背景具有足够的对比度。最低要求色比3：1（越多越好）。颜色不应该是标记事物的唯一方式。例如，错误消息不应仅依赖于红色文本，警告图标将为色盲用户提供参考。
避免使用小而模糊的控件 。如果可点击组件至少为40×40像素，则认为它们是触摸友好的。由图标表示的命令应标记或具有工具提示和替代文本。设计师不应过度使用图标，因为用户可能无法正确理解复杂的隐喻。
简而言之
内容统一和格式化也是设计师的工作。
不仅要考虑界面元素，还要考虑用例，规则和常用模式。
原文：https://medium.muz.li/complex-tables-356826d11861
译者：Ever
相关文章推荐：
在构建设计规范之前，你需要看看这些设计资源
如何构建设计语言系统
给初级UI&UE设计师的Sketch资源分享
交互设计原则和理论1——尼尔森十大可用性原则
交互设计原则和理论2——七大定律
国外设计团队的高频设计工具与协作工具
16个表单优化技巧
网页端表格设计指南
怎样提高注册登录流程的交互体验
不可错过的2019设计趋势
㈡ jsp页面如何在前端判断表格两行的数据是否相同
使用js进行获取表格中的内容，然后进行判断是否相同。
㈢ 前端图表如果处理大量数据该怎么办
浅谈一下Cognos处理大数据的思路，仅针对10.2.1以下的版本，对于10.2.1当中引入的hadloop等分布式数据仓库等不做介绍。我们主要从一个一般中等项目当中，用怎样的思路来优化我们的查询。
我们主要从3个思路来思考大数据的处理
一、数据库层次
现在主流的Cognos项目，主要的开发模式还是基于rolap的dmr报表建模。因此，数据库的优化就显得由为重要。主要通过以下几个方面优化我们的数据库：
(1)维度id，维度层次id等关键减缩字段建立索引建立、维护。
(2)根据数据量的大小，按时间等进行分区优化。
(3)高速缓冲表MQT的使用
(4)表空间、缓冲池设置等
(5)数据库性能优化
二、Cognos Server优化
Cognos优化包括对配置文件的优化，集群的搭建，服务和日志的开启等基于cognos 软件安装，配置的优化，主要包括以下几个方面：
2.1 apache 配置优化
Timeout（超时）/MaxKeepAliveRequests（最大的请求数）/KeepAliveTimeout（请求超时）的优化配置
2.2Cognos自带tomcat配置调优
(1)可修改TOMCAT配置文件CRN_ROOT\tomcat.\conf\server.xml。其参数集中在行：
可以对maxProcessors（最大进程数）/AcceptCount(最大连接数) ConnectionTimeout（连接超时）进行修改
(2)文件路径：CRN_ROOT\tomcat.\conf\web.xml
可以对session-timeout进行修改.
2.3Cognos sever配置文件优化
2.3.1 reportservice.xml优化
文件路径：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ reportservice.xml
注：修改文件后，重启服务后配置生效。
包括以下参数 max_process(交互报表处理进程数，和cpu有关) inger_process(交互报表初始化进程数，和cpu优关)
max_non_affine_connections_per_process(交互报表所占线程数) idle_process_check_interval_ms(空闲检测时间)
queue_time_limit_ms(报表服务队列时间限制) async_wait_timeout_ms(Dispatcher请求等待同步时间)
2.3.2 batchreportservice.xml
文件路径：CRN_ROOT\ webapps\p2pd\WEB-INF\services\ batchreportservice.xml
注：修改文件后，重启服务后配置生效。
包括以下参数 max_process(服务批量报表处理所占进程数) linger_process(服务批量报表处理初始化进程数)
max_non_affine_connections_per_process(服务批量报表处理所占线程数) idle_process_check_interval_ms(空闲进程检测时间间隔)
idle_process_max_idle_ticks(空闲进程检测标记) queue_time_limit_ms(批量报表处理排队时间限制) async_wait_timeout_ms(Dispatcher请求等待同步时间)
2.3.3 CQEConfig.xml
主要是与数据库参数设置，文件路径：CRN_ROOT\configuration\ CQEConfig.xml.sample
注：将CQEConfig.xml.sample文件名修改为CQEConfig.xml后，重启服务后配置生效。
可以修改以下参数：Timeout(应用数据库连接超时设置) PoolSize(应用数据库连接池最大连接数设置) queryReuse(查询缓冲设置)
2013-07-08 0
分享
答案对人有帮助，有参考价值1
曾力 - Cognos讲师、Cognos独立顾问、数据仓库架构师 2013-07-08 回答
2.3.4 ppds_cfg.xml
主要进行缓存和日志参数设置，文件路径：\cognos\c8\configuration\ ppds_cfg.xml
注：重启服务后配置生效。
可以修改以下参数：ReadCacheSize(可减少用户访问时服务器的磁盘IO。提高访问速度。) pcQueryLogFile(建议生产环境关闭该日志的跟踪，一般默认也是关闭状态)
2.4 Cognos content store优化
2.4.1优化内容库连接服务
内容库最好外配为db2 oracle等数据库，不要用自带的derby.因为项目中的日志信息会非常多，严重影响内容库的效率。
Cognos Administration，在系统下选择选择对应的服务，选择ContentManagerService的属性，设置相应的连接参数信息。
2.4.2日志优化
适当开启各个cognos服务的日志级别，越高级的级别对应更详细，更明确的日志，但也会影响整个系统的效率。
这是一把双刃剑，需要适当调整。日志级别设置得越高，就越降低系统性能。通常情况下，您可以将级别设置为
“最小”或“基本”来收集错误，或设置为“请求”来收集错误和警告。
2.5提高访问数据库速度
Cognos和数据库间参数在cer\bin\cogdm.ini文件中,(根据版本不同是安装目录的数字，根据连接的数据库不同，是对应数据库名称的关键字)
以oracle数据库为例,参数在cogdmor.ini文件中，打开这个文件查找字符串Fetch Number of Rows=去掉这行前面的分号，将10改成2000；
这样这行就成了Fetch Number of Rows=2000，表示是每次从数据库取2000条数据。其他数据库基本上都有类似的配置。用以提高从数据库中提取数据的速度。
2.6加大缓存
cer\bin\Cer.ini(*根据版本不同是安装目录的数字)：
SortMemory=5120
（这里 SortMemory 单位是 2kbytes，5120代表 2k x 5120 = 10M）（技巧：一般 SortMemory 取空闲内存的十分之一到八分之一大小）
2.7修改cognos configuration中的参数来优化
在cognos configuration中有很多参数可以优化来提高整体软件的运行效率，比如增加内存、增加查询缓存
2.8分布式部署
分布式部署可以大大提升Cognos服务器的负载能力，同时容错保护功能可以使服务器更为稳定的运行，很好的支持大用户量的并发使用。
2013-07-08 0
答案对人有帮助，有参考价值1
曾力 - Cognos讲师、Cognos独立顾问、数据仓库架构师 2013-07-08 回答
3.报表设计优化
Cognos报表作为一个工具，在非cube模式下，最终我们执行报表查询的时候，我们的报表发送到数据库进行查询的本质还是sql，所以，在我们制作一张报表的时候，我们要尽可能的利用fm,rs当中的功能，优化报表最终执行生成的SQL实现整个报表的优化。而CUBE模式下，我们更多要考虑配置、存放和数据库大小所造成的影响，下面我会细细说来。
2013-07-08 0
答案对人有帮助，有参考价值1
曾力 - Cognos讲师、Cognos独立顾问、数据仓库架构师 2013-07-08 回答
3.1 FM建模优化
3.1.1手写SQL定制查询主题
右键点击查询主题的菜单项Edit Definition…可以进入SQL语句编写框，调整查询主题的SQL语句。默认情况下，这里的SQL语句为Cognos SQL类型。如果需要编写应用数据库可以直接运行的本地SQL需要将这里的SQL类型进行设置。点击右上方的Options按钮，选择SQL Settings标签页，选择SQL Type为Native。这个时候，我们手写SQL就非常注重这个SQL的优化，尽量避免SELECT *,用EXISTS替代IN,多使用DECODE来进行判断，条件语句注意点等常用SQL优化策略，编写对应的SQL.
3.1.2尽量使用特定数据的数据库函数
在菜单项Actions中选择Specify Package Function List…指定报表定制中可以使用的数据库函数列表。将除应用数据库意外的其他数据库类型从Selected function sets中选到Available function sets中，尽量使用特定数据库的自带函数可以提高查询效率。
3.1.3表关联设定
在建立表关联尽量避免使用外关联关系（包括左外关联、右外关联、全外关联）。外关联的使用会使数据库的查询压力骤增，从而影响前端报表的生成。在星型结构、雪花型结构的数据仓库模型中，尽量按照一对一、一对多的关联关系设定维表与实事表之间的关联，Cognos Server会依照这里的关联关系自动优化提交给数据库的SQL语句。如果关联关系中出现了环状连接关系，可以通过别名表或是快捷键的方式解决环状连接问题.
3.1.4Edit Governors查询性能设置
在菜单项Project中选择Edit Governors，可以设置查询的查询性能
Report table limits 该属性设置报表中运行SQL所涉及的TABLE数量
Data retrieval limits 该属性设置报表中运行SQL返回结果的数量
Query execution time limits 该属性设置报表中运行SQL的执行时间
Large text items limit 该属性设置报表中运行SQL返回大文字块的字符数量限制
2013-07-08 0
答案对人有帮助，有参考价值1
曾力 - Cognos讲师、Cognos独立顾问、数据仓库架构师 2013-07-08 回答
3.2 RS报表调优
3.2.1报表函数的使用
在报表函数的使用上，尽可能使用应用数据库能够解析的本地数据库函数，函数列表中的通用函数，在处理时会将函数放在报表服务器进行运算，从而增大了报表服务器的性能开销。
3.2.2 观察查询的SQL
我们选择查询页面，GENERATE SQL/MDX观察这个报表生成的SQL并进行不断优化，
3.3.33.2 RS报表调优
3.2.1报表函数的使用
在报表函数的使用上，尽可能使用应用数据库能够解析的本地数据库函数，函数列表中的通用函数，在处理时会将函数放在报表服务器进行运算，从而增大了报表服务器的性能开销。
3.2.2 观察查询的SQL
我们选择查询页面，GENERATE SQL/MDX观察这个报表生成的SQL并进行不断优化，
3.3.3查询字段、查询表顺序调整
根据数据库的优化策略，可能需要将查询字段的顺序进行调整，可以在Data Items窗口中进行设置。查询SQL语句中，From关键字后面的表顺序是按照select关键字后出现的字段顺序进行设置的。在为表顺序进行设置时，属性为Identifier或Attribute的字段比属性为Fact的字段在为表排序时的优先级要高，即，先以Identifier、Attribute字段的出现顺序为表进行排序，如果没有上述两类字段，才以Fact字段的出现顺序为表进行排序。
3.3.4聚合前后设置过滤条件
将过滤条件的Application属性设置为After aggregation或Before aggregation可以调整过滤条件在聚合前或是聚合后生效。After aggregation生成过滤条件的SQL语句使用的是关键字having，而Before aggregation生成过滤条件的SQL语句使用的是关键字where。
3.3.5取消报表自动分组提高明细报表查询速度
如果报表要展现明细数据，不想使用任何汇总，我们可以到此报表对应的查询中将自动分组属性定义为否。修改地方：对象的属性Auto Group & Summarize可以设置当前SQL语句的查询中是否加入distinct、sum、group by这样的关键字。默认情况下，该属性设置为Yes，可以根据查询情况关掉此开关项，减少SQL语句的复杂度。
3.3.6自动排序设置
在Query的Auto-sort属性中可以为查询设置是否自动排序。如果选择是，则会在生成的SQL语句中自动加入Order By关键字，排序字段将自动根据数据项的属性进行设置（如果查询字段的usage属性为Attribute、Identifier则排序，如果为Fact则不排序）；如果选择否、则不排序；如果选择最小，则根据数据项的排序属性进行排序设置。默认值为最小。
3.3.7报表Processing设置
在Query的Processing属性中可以为查询设置SQL的处理设置。Cognos Report Studio会将报表的所有设置首先转换为Cognos SQL提交给报表服务器，服务器在进行必要处理后，会将SQL语句转换为应用数据库本地执行的SQL语句，进行数据库处理。为提高报表的处理速度，要尽可能的将报表的处理运算放在数据库进行，以保证其运行速度。将该属性设置为Database only会将报表页面生成的Cognos SQL不经报表服务器处理全部转换为数据库能够执行的本地数据库SQL，如果将该属性设置为Limited Local，则将报表页面生成的Cognos SQL先进行必要的报表服务器运算，然后再将剩余的部分提交给数据库进行本地SQL的处理。默认值为Framework中为Datasource对象的设置的queryProcessing属性。
3.3.8使用With子句
在Query的Use SQL With Clause属性中可以为查询设置是否使用With子句。部分数据库例如Oracle支持With关键字，当查询中嵌套子查询时，可以通过With子句的使用，减轻报表服务器对Cognos SQL的处理，从而提升报表的运行性能。如果将该属性设置为Yes，则允许使用With关键字，查询中生成的Native SQL将出现With子句；如果将该属性设置为No，虽然拒绝使用With关键字。默认值为Framework中Edit Governors下的Use WITH clause when generating SQL属性设置。
3.3.9报表服务器本地缓存设置
在Query的Use Local Cache属性中可以为查询设置是否使用本地缓存。如果将该属性设置为Yes，则启用服务器的本地缓存，服务器将为查询结果保存在session中，当用户在浏览器内再次打开同一张报表时，查询结果将取自缓存，从而减轻了数据库的负载压力；如果将该属性设置为No，则禁用服务器的本地缓存，查询结果全部取自数据库的实时数据。默认值为Framework中Edit Governors下的Allow usage of local cache属性设置。
我用的是finereport，比这个方便
㈣ 前端用echarts实现表格形柱形图的有哪些
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性 化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表 盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展 现。模块化单文件引入(推荐)1新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，2新建script标签引入模块化单文件echarts.js，3新建script标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)，4script标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，5浏览器中打开ecarts.html，就可以看到以下效果，：END标签式单文件引入新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，新建script标签引入echart-all.js，新建script，使用全局变量echarts初始化图表并驱动图表的生成，浏览器中打开echarts.html，可以看到如下效果，
㈤ 如何让前端以表格形式动态展示后端Python的数据
主要就是js对数据的操作和对dom的操作。 前端的工作就是切图，展示数据到网页中。那么怎么获取数据呢？以什么格式获取数据呢？都是需要和后台交互的。 后台语言都是不一样的：php，jsp等等，我们前端js的工作就是把他们的数据拿过来显示。
㈥ 前端入门|HTML基础元素3，表格
表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
行、列、单元格单元格特点：同行等高、同列等宽。
表格的基本语法：
创建一个3行3列的表格：
单元格中内容的填充间距通过cellpadding(默认1px)属性来设置；
单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。
设置单元格的填充间距为10，单元格之间的间距为0，红色边框
一般表格的第一行是标题，并且是文本居中、加粗，将td换成th。
而某些数据需要居中，但不希望加粗，可以给td添加align="center"
表格的跨行跨列
有时，表格的结构并没有那么简单，可能会存在跨行和跨列的情况：
跨行：
跨列：
跨行、跨列并存：
这个问题看似很复杂，其实很简单，在制作跨行和跨列的表格时，只需按照如下步骤就可以轻松搞定！：
首先做一个完整的表格：注意虚线部分，最终去掉这些虚线就是我们要的效果
找出最左上角那个“侵占”其他单元格的单元格，如下图标注数字的位置
观察这个单元格“侵占”的是行还是列，算上自己总共是几个？(行数用r表示，列数用c表示)：
如果是行：在这个单元格上添加rowspan="r"
如果是列：在这个单元格上添加colspan="c"
如果既有行又有列：在这个单元格上添加rowspan="r" colspan="c"
把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！
按以上步骤完成一个跨行跨列的表格：
每天持续更新，点点关注不迷路哦~
㈦ 如何前端实现类似汽车之家车辆对比的功能
但效果自己搞吧
给分析一下
每个产品都有独立的id。
说白了，这几个就是数据调用的问题，而怎么判断id就是个关键问题。
另外就是就数据的 i++1展示效果了
㈧ 大数据可视化大屏图表设计经验，教给你！
自从跟大家分享第一篇 《大数据可视化大屏设计经验，教给你！》 ，很多小伙伴都会问我一些相关的问题，看了小伙伴给我发的视觉稿，整体都还不错，但是发现图表的设计都有一些问题，大家可能对数据可视化的图表设计经验少一些，所以这篇文章就挖掘一下图表的细节表现，分享我曾经遇到过的坑和对图表设计的理解。
图表设计
图表设计概念
图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现，也是数据可视化的核心表现，图表设计既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。
下面分析三种常用的可视化图表设计：
折线图
折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。
左图坐标轴设定的太低，折线变化过于陡峭，图中数值区间为（10-34）数据可视化的表现过于夸大了折线变化的趋势。
右图坐标轴的数值设定的太高，则折线变化过于平缓，无法清晰的表现折线的变化。
合理的折线图应当占据图表的三分之二的位置，图表的X轴数值范围应根据折线的数值增减变化而变化，这需要跟前端小哥哥小姐姐说明，做成动态计算。
折线图的折线粗细要合理，过细的折线会降低数据表现，过粗的折线会损失折线中的数据波动细节，视觉上较难精准找到折线点的相应数值！我通常用两个像素的线，看起来比较合适！
右图刻度线颜色过重，影响图表数据的表现，零基线跟图表内的刻度线对比不够明显，整体很乱。零基线是强调起始位置的，一般要比图表内的线颜色凸出一些。
条形图/柱状图
理想很丰满，现实很骨感。这个案例是我之前在工作中遇到的问题，数据进来后，被吓到了，问题的原因是没有跟前端小哥姐沟通好，他们把X轴写死，导致出现这种问题，其实应该情况要把这些图表的取值范围写成动态计算的。
例如，以现在数值范围为例，数据的最高值为18，X轴最高数值应该为25，当数据又上升一定的高度后，X轴再上升到相应的数值高度，这样避免了如右图的问题。
坐标轴的标签文字最好能水平排列， 当X轴标签文字过多时，不建议倾斜排列、上下排列、换行排列 文字多了这样的展示大大降低了阅读性！下图给出两个解决方案，大大提高标签文字的阅读性！
解决方案
柱子之间过于分散就会失去数据之间的关联性，过密就会变得数据之间没有独立性更不利于舒适阅读。
当柱子为n时，柱子直接的距离建议与n相差不要太大，柱子靠边的距离，最好是柱子之间的一半的距离，这样视觉上最为舒适。
饼图
左1图，不建议在饼图内与百分比数值一起显示，饼图本身的形状和大小，文字过多时容易溢出，如果出现一个2%一个1%，就很难辨别图形指向，这样也就失去了数据可视化的意义，PPT通常有这样的设计样式，因为是个死图。
左3图，人的阅读习惯是从左到右，从上到下，所以数据从大到小排列，更有助于阅读，图形也更具美感！
当饼图为检出率，或者一些重要信息检测的重点关注数据，就不建议大小数据顺时针排列，左1图这种情况一般很少出现，因为关注的是检出数值，展示未检出数据实为鸡肋，可能是极少情况的需要吧！
右图对于类似检出率的数据最为合适，直观清晰，没有无用数据干扰！
当饼图的标签维度过多时，就不适合把数据围绕饼图一周展示，会很乱，不易阅读，解决方案如右图！
图表分类图
分享一张图表分类大全，保存起来，设计数据可视化产品，会有重要参考价值！
这张图由设计师Abela对图表的各种特征进行了大致的概括总结。
㈨ 前端—表单表格
作用:将前台用户数据通过get或post请求方式,提交给后台,并将新页面标签中接收与后台相应
请求方式:
1,get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小的限制
2,post:将数据以数据包的方式提交给后台,速度较慢,但安全性高,且无数据大小限制
3,前后台交换数据的依据为:表单元素的name与value,name为key,value为value
action:提交的后台接口(请求的服务器指定路径)
特点:1,表头垂直水平居中
2,单元格垂直居中
3,cellspacing控制单元格之间的间距
4,table的显示特性:内容不超过规定的宽高则采用规定的宽高,当内容显示区域的宽高超过规定的宽高,表格的宽高由内容显示区域决定
5,rules:边框规则,设置后会合并边框(cellspacing失效):groups分组带有边框 all所有带有边框,rows行带有边框,cols列带有边框
6,cellpadding:内边距(一般对内容进行格式化布局)
7,cell的width可以规定列宽占比(以上的设置一般在table标签中设置)
8,colspan合并列 rowspan合并行(在表格中直接操作),以上的赋值可以在引号里面直接给值,不用加单位