关于图表的整理

Posted 2023-05-04

参考技术A

比较常用的图表为：

以下为具体介绍：

又称条形统计图，条状图。是一种以长方形的长度为变量的统计图表。常用于比较两个或以上的值。柱形图常见的有以下4种：

垂直柱形图，最常见的柱形图； 水平柱形图，一般按照数值的大小排列； 簇状柱形图，用于多组数据比较，强调一组数据内部的比较； 堆叠柱形图，用于多组数据比较，和簇状柱形图不同的是，堆叠柱形图更加强调一组数据中部分与整体的关系。

以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系，饼图中各项的总和为100%，最适合表达单一主题，即部分占整体的比例。饼图的类型比较少，主要有以下三种：

基础型饼图，包括常规型饼图和环形饼图； 半圆型饼图，在某些场景中，半圆会比较方便排版，利于对齐。而且标注信息也方便呈现； 复合型饼图，当饼图的扇形数量过多时，可以将最后的若干项合并为其他类，在二级图表中表现这些项目的构成。

是通过线条的波动（上升或下降）来显示连续数据随时间或有序类别变化的图表。常用于强调数据的变化或者趋势。折线图主要可分为单条、多条、堆叠：

单条折线图，只显示一组数据波动的情况； 多条折线图，同时显示多组数据波动的情况； 多条堆叠折线图，显示多组数据波动的情况，同时表现多组数据之合的变化。多个数据叠加时（堆叠图），推荐使用面积图，不推荐使用折线图形式

由若干的行与列所构成的一种有序的组织形式，表格可以高效率的展现大量数据。表格的类型多种多样，除了单纯的文本和数字外，我们还可以往里面添加图片、操作等多种类型。表格是几种图表中最多样和特殊的类型。

基础表格，静态纯文本类的基本表格； 内容复合表格，由其他内容类型结合的较复杂的表格形式； 操作复合表格，用户的行为对表格样式或特征产生影响。

使用光滑的曲线来连接。如果数据是连贯实时的，且任意两点间的数据具有分析价值，用[曲线图] 比用[折线图] 更合适，如24小时数据。

即中心为空的饼图，用来表现进度。除了显示占比，还可用来显示进度加载，拟钟表/ 计时器设计

常用在基于地理位置，对一段时间的数据（常常是离散量）累积量进行分布统计的图表，进而可以分析数据密集区域/稀疏区域。这是一种展示效果较好的表达方式。

[雷达图] 在比较多个类别数据序列以及查看整体情况很有用，既可以查看自身整体发展的均衡情况，也可以对比两个序列整体的优劣势。这也是一种展示效果不错的数据表达方式，在展示整体综合信息上很直观。

列表是一种常见的表达方式，通常我们见到的列表往往是如下最右的Spendee的界面，但也有一些APP做了可视化尝试，在列表中通过对数据可视化做一些分区，详见如下左和中Elevate的界面。

面积图强调的是数据随着时间变化的程度。

是将两种或多种图表类型显示在同一图表，主要是实现将不同角度的数据放到同一图表中，以便发现数据之间的关联性。

散点图常用于显示两组数据之间的相关性，可展示数据的分布情况。例如，下图展示了全年每个订单的产品数量分别情况。

用于显示三组数据之间的关系，其中一组数据作为横坐标，一组数据作为纵坐标，另一组数据表示气泡的大小。

深色底上的图表通常为了营造一种氛围，展示数据信息一般较少，此时可以选用鲜亮的色彩，这样图表信息容易从深色中跳出来。

如果需要清晰展示大量的数据信息，建议选用浅色底，数据信息在浅色底上的识别度相对较高。但需要注意的是：如果数据信息量太小，浅色底上会显得页面太空，这会让用户觉得你的平台没有内容或者热度。当然，这可以通过图形质感、颜色等优化。

有时，为了让页面更加生动，可以将数据信息展示在大面积色块上。
商务类APP可采用用蓝色、绿色系作为底色。
运动类APP可选用的色彩自由度更高，偏活力的色彩，如橙色、黄色、橘色等都可以。

为了让数据阅读更加轻松，可采用图片底。在一些天气类APP中，这种使用方式比较常见，图片内容与数据信息产生关联，提升可读性。

原则 ：以设计师为准
行长度 ：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
行距 ：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。
字体样式 ：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
外边距和内边距 ：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。
颜色与对比度 ：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

数据产品的图表强调数据的准确性，通常零基线是不可或缺的，为了强调起始位置，颜色上要比其他的网格线深。考虑到用户不同显示设备的差异，建议至少取94的灰度值才可以保证清楚的辨识，颜色太浅在一些设备上无法显示清楚。

柱子的宽度为D，则柱子之间的间距建议在1/2D与D之间，簇形柱形图两个柱子之间的间距建议为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性，又不会过密-保障数据之间的独立性和舒适阅读。

饼图一般我们采用的绘制方法是，按照用户的阅读习惯，从上到下，以时钟的12点为起点，顺时针排布扇。

但这种绘制方法存在一点不足，在用户视线的焦点——饼图的上半部，不重要的最小数据项和最大数据项一起占据了视觉焦点。为了解决这个问题，我们在这个基础上做了一些优化，同样以时钟的12点为起点，先逆时针绘制最大切片，再回到12点，顺时针绘制出第二大切片，其余切片依次绘制（图2-17）。这种方法使得用户视线的焦点——饼图的上半部放置的都是最重要的数据。但这种绘制方法也有一点小小的不足：在有多个饼图时，每个饼图的起始位置都不相同（图中问号所标出的位置）。大家可以根据不同的使用场景选择不同的饼图绘制方法。

折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。坐标轴的数值设定的太高，则折线变化过于平缓，掩盖现实无法清晰的表现折线的变化。反之，如果坐标轴设定的太低，又会让折线变化过于陡峭，过于夸张夸大了折线变化的趋势。

如何提升图表的易读性
数据产品中往往充满了大量的数字和图表，用户容易淹没在数据的海洋中，除了精准表达这些数据以外，提升图表的易读性也是数据产品中图表设计的一个显著特点。图表中文字部分通常为具体的数值和数值的含义解释。通过对这些文本进行合理排版，可以使用户快速理解图表，从而达到高效阅读的目的。

坐标轴的标签使用水平排列，不建议垂直排列或者倾斜排列，字数多的时候不易阅读。柱形图中部分标签的使用方法也适用于折线图。

柱形图的标签排列 水平柱形图一般会简化坐标，数据值跟随在柱形图后方，增加数据墨水比率。

水平柱形图 当坐标轴标签过长时，垂直柱形图无法将所有坐标轴标签全部显示，有以下几种解决方案：

可采用水平柱形图增加标签的显示空间。

显示主刻度，其余数据省略，通过交互动作来显示。比如显示2010年/2011年，而年里面的具体的月份隐藏，hover时出现。如图2-22中的横坐标。 高位数的数值可以转化单位。比如500,000显示为50万，更符合中文的阅读习惯，且节省空间。如图2-22中的纵坐标。

在饼图内与百分比数值一起显示。

信息连贯视觉集中，理论上最合适的位置。但受限于饼图本身的形状和大小，文字过多时容易溢出。

使用引导线，在饼图周围合适位置显示。

引导线可以将切片与标签有效的关联，可以显示更多的字符数。引导线较多时，可以进行变形规整。在数据产品中通常是活动数据，数值大小经常在变化，标签和引导线的位置不固定，排版上难以掌控。

数值和标签分离显示。

标签字符数不受局限，但标签与饼图分离，需要对照阅读。

配合交互动作切换标签在环形圆饼空白处显示。

空白部分不受切片大小影响，标签和数值可一起显示。适用于强调当个切片数值。标签与切片对应关系需要带交互操作说明，数据展示较隐藏。

文字信息纵向列对比能够很好的形成视觉引导线，符合格式塔心理学中相近原则。不同的数据类型有不同的对齐方式。一般来说文本采用左对齐，数据右对齐，方便通过数字位数的长短对比数据的量级和大小。

表示状态的文字，通常只有固定几种类型（如已完成、待支付等），则可以采用居中对齐。关系紧密的字段可以靠近成组排列，加强数据之间的关联性，同时减少了数据组的量，也可以方便用户快速定位信息。

首先必须要记住：图表的任何一个元素都不可以任意摆放
为什么很多人崇尚 商业图表 原因就是 图表的任何一个元素都不是任意摆放的

设计围绕的主要是以下四项基本原则：

1.亲密性
亲密性原则指的是：将相关项组织在一起。因为在一个图表上，物理上的接近就意味着它们之前存在意义上的关联。

2.对齐
对齐原则是指：任何元素都不能在图表上随意安放，每一项都应该与图表上某个内容存在某种视觉联系。

3.重复
重复原则是指：设计中的某些方面要在整个作品中重复。

4.对比
对比原则是指：如果两项不完全相同，那么就应当使之不同，而且应当是截然不同。

B1 摆正你的元素关系[亲密性详解]

观察附件图片：
第一张图表标题和图例看起来有并列关系，但实际上，并不存在并列关系。
这样的图表让人看起来会觉得没有重点，所以图表标题根本没人会多看一眼，
受众会很茫然这是什么图？

请记住：图表元素里 图表标题 的意义是告诉受众这个图要表达什么

第二张把标题和图例通过空间和大小分成两组，这样就变得好得多
受众看到图表标题比较大的字后，受众马上会明白你要通过图表表达什么了。

B2 专业精神 [对齐详解]

你我实际已经在Excel应用中不知不觉的使用了这一原则，而且很多情况下，你我用到的都可能是居中对齐。
尤其是Excel 图表的标题 默认 是这样的
但你应该知道，左右对齐给人的视觉效果更为强烈。
文字边缘与图表核心偏远对齐往往有更好的效果
这里有两个概念要讲：

软：
居中对齐的边界是中心线 而这个中心线在人的视觉中的概念是模糊的 其两侧 大量的留空 会使人感到安全 但反应了你的怯懦

硬：
无论你愿意或不愿意 图表的 坐标和边框 总给人 生硬的感觉 与这些对齐 就会使图面显示出硬朗的感觉 让人信服

下面的例子中，NO.3明显要比其它好很多，最糟糕就是NO.1了。

B3 不要让你的图表失去统一性[重复原则详解]

要有整体性，你甚至可以在自己的多个图表中都沿用某一种重复，这样别人看到这个重复的时候就能知道这个图表是你的作品。
在图表设计中，重复性原则有两种应用。

第一种就是 颜色，使用颜色之前你必须清楚，颜色的大面积 尤其是图表区背景
使用会减少图表核心诉求的表达面积，降低图表的表现力。
看看 图示№ 1

第二种重复是在元素中相同的格式，这会让受众很清楚的明白各元素间的层次关系。
重复原则可以让你的图表看起来简化一些，而且更具可读性。
比如字体的大小 字体的类别
请尽量在图表中不要超过一种字体 和 两种字体大小 这个限制 因为字体是形状
看看 图示№ 2

无论如何：图表中的字符千万不要太多。坐标轴上的字符是图表字符相对集中的区域，请慎重处理坐标轴
图表重点体现的是： 势 / 差异 / 趋向 这是体现你目标诉求的表现方式
如果体现信息过多 势 / 差异 / 趋向 就不明显了 其它的信息干扰了图表的目标诉求表现
不要认为图表上的某些元素圣神不可侵犯 大胆去掉它 比如坐标轴 网格线 绘图区背景及边框
看看 图示№ 3

记住一个原则：所有字符和信息必须少到3秒钟可以理解你的图表。

B4 强烈的去表达你的诉求[对比使用详解]
你的目的是什么：你准备使用图表来说明什么问题？要说明这个问题 请大胆使用 对比
它将有力的帮助你完成这样的表达

对比一定要强烈，千万不要畏缩和偷懒。不管是有意无意，一般人很少用到对比原则，反而常常在这个问题上犯下错误。
需要注意：如果对比不强烈（比如三号字体和四号字体），就不能算作是对比，而会成为冲突，在观众看来，这种设计更像是一个失误。

在图表设计中，对比可以通过很多方法实现：如字号、字体 颜色 形状[点 线 面] 等。
通常，我们需要使用以上多种方式来实现对比。

最好的对比切入点是：颜色 和 大小或面积

如果你的图表上的颜色不多：比如只有白色 和 黑色 ，你只要将其中一个元素改为 红色 这个对比效果将完全不同
但关于字体的使用要注意：同一图表中应用了对比的元素，该元素的对比效果不能出现两次[比如字体的类别 和 颜色]。

永远记住：请保持整个图表的布局有焦点，且焦点是唯一的

附图右侧的图表明确向受众传递了如下信息：
使用了较大的字体来这个图是做什么的，使用了红色这个强烈的颜色来说明当前的进度如何
注意：
色彩的使用 在这里红色将受众的视线集中在了当前的进度，他就成了关注焦点 因为它太强烈了
图表标题的大字使用 在这里成了辅助说明当前进度的必要信息

左侧的表现就相应差很多

Highcharts - 关于完整图表宽度的问题

【中文标题】Highcharts - 关于完整图表宽度的问题

【英文标题】：Highcharts - issue about full chart width

【发布时间】：2013-05-02 10:43:24

【问题描述】：

我正在使用 Highcharts 柱形图，我希望它是 100% 宽度响应图表。该容器是一个简单的<div>，没有任何格式。当文档加载时，图表总是固定宽度 600x400px 大小。如果我调整窗口大小或切换到另一个浏览器选项卡，图表会填充宽度并变成响应式全宽图表，就像我想要的那样。如果我重新加载页面，它又是固定宽度。我尝试为容器和图表设置宽度，但是没有任何帮助。如果我将容器 div 移到父 div 上方一级，它可以工作。如何使图表在页面加载时也变成全宽？

谢谢

【问题讨论】：

请创建 jsfiddle ？

你能展示一些图表的JavaScript代码和容器的一些HTML和CSS吗？没有它就很难理解问题。

虽然很奇怪，但我创建的 jsfiddle 示例运行良好。我想这可能是一个全局 CSS 或影响我图表的东西。无论如何，这是代码jsfiddle.net/zgsDj，除了在我的真实页面中加载时它不是全宽，而是 600px 宽度。

相关：Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?.

【参考方案1】：

图表的宽度取自jQuery.width(container)，因此如果您在某些隐藏选项卡或类似的东西中有图表，宽度将是未定义的。在这种情况下，会设置默认宽度和高度 (600x400)。

【讨论】：

“标签”正是问题所在。我正在使用带有 jQ​​uery UI 选项卡插件的图表，禁用它后，图表正确呈现。现在我通过在图表呈现后初始化选项卡来解决它。

【参考方案2】：

我知道这是一个老问题，但我遇到了完全相同的问题并找到了另一个效果很好的解决方案。

从 Highcharts 4.1.5 开始（也可能在旧版本中），chart 对象具有 reflow() 函数。查看文档here。

回流（）

将图表重排到其容器。默认情况下，根据 chart.reflow 选项，在 window.resize 事件之后，图表会自动回流到其容器。但是，对于 div 调整大小没有可靠的事件，因此如果在没有窗口调整大小事件的情况下调整容器大小，则必须显式调用。

希望对其他人有所帮助。

【讨论】：

只需在我的内部编写类似 $(".tab1").find(".chartContainer").each(function () $(this).highcharts().reflow()) 的东西$(".button").click() 比在隐藏图表之前渲染图表更有用。我的情况要求我根据 ajax-gets 动态创建图表，所以这确实是我能找到的最好（也是唯一）的解决方案。谢谢！

完美！！效果很好！