html中统计图怎么做,如何做专业、美观的图表（基础统计图部分）

迷南。 2022-10-06 06:58 306阅读 0赞

转自：http://marslau.com/archives/811.html

饼图

用于显示各项占总体的比例大小，不要用于各项间的比较关系。

数据建议

1)单系列数据

2)扇区不易过多，最好不超过7个扇区，多余部分可用其他表示

3)建议扇区从大到小排序

图形建议

4)第一扇区从12点位置开始，顺时针

5)最好不使用图例，标签(分类+数值)直接在扇区上或旁边

6)扇区数量较少的2D饼图不用引导线(标签连接线)

7)扇区颜色建议色相相邻，如”赤橙黄绿青蓝紫”，饱和度相似；”其他”扇区用灰色

8)不要使用爆炸(全部展开)效果，即分离型饼图

9)用弹出块或高亮变色突出要强调的数据

10)尽量不用3D饼图，如用厚度要薄、仰角要大

![a4c26d1e5885305701be709a3d33442f.png][]

柱形图/条形图

用于显示各项间的数据对比，堆积型用于比较总量

数据建议

1)数据可以从大到小排序，最大的在最上(左)面

2)对系列值普遍较大且相近的，可设置系列值的起始点

图形建议

3)简洁的坐标轴标签

4)分类标签过长时使用条形图

5)有负数是左边轴标签放右边(上边)或图外

6)值标签非常长时，可考虑放在柱子内

7)单系列柱图不要使用图例，直接标记

8)多系列柱图使用图例，放在图形区下方

9)柱与柱的间距要小于柱子的宽度

10)柱间距对等，柱子的首尾间距为1/2柱间距

11)簇状图中各系列的颜色明暗交替明显，保证黑白打印时的可读性

12)图形背景、网格线弱化

13)可设置警戒区域(线)

14)尽量不使用3D效果，如使用请用矩形方块，不要用圆柱(圆锥、棱锥)，使用矩形方块

![a4c26d1e5885305701be709a3d33442f.png][]

![a4c26d1e5885305701be709a3d33442f.png][]

折线图

显示随时间而变化的连续数据

数据建议

1)折线(系列)数量不要太多，以免杂乱

图形建议

2)线条要足够粗，明显粗过非数据元素

3)折线图中，不同系列可用不同的数据点形状标记

4)尽量不使用图例，标示文字直接标示在折线旁边

5)加粗强调某条重要的曲线

6)图形背景、网格线弱化

7)可设置较细的警戒线

8)不使用3D折线图

![a4c26d1e5885305701be709a3d33442f.png][]

使用原则

通过这几个基础图形的实例总结了以下使用原则，应用在其他图形应该也适用：

准确：根据数据关系选择相应的类型，参见下图

简洁：减少一次性展示数据，标签文字简短，少用3D效果，弱化背景网格线

清晰：利用好配色、透明度，使图形数据无歧义

直接：能直接在图上标示的就不单独列图例

强调：分离、加粗、高亮等方式强调重点数据

习惯：遵守用户使用习惯，12点开始顺时针、从大到小等

![a4c26d1e5885305701be709a3d33442f.png][]

[a4c26d1e5885305701be709a3d33442f.png]: /images/20221005/1b92916f5eab450fb6dddf093bc00fed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android统计图表绘制：基于新版MPAndroidChart绘制数理统计柱状图

Android统计图表绘制：基于新版MPAndroidChart绘制数理统计柱状图 github上的开源项目MPAndroidChart在最新的3.0.3中，绘制图

待我称王封你为后i/ 2023年10月17日 18:37/ 0 赞/ 65 阅读

相关 html中制作banner,css banner轮播图怎么做？

css banner轮播图怎么做？下面本篇文章给大家简单介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![5e7dab3f27892231.jp

约定不等于承诺〃/ 2022年10月06日 13:57/ 0 赞/ 251 阅读

相关 html中统计图怎么做,如何做专业、美观的图表（基础统计图部分）

转自：http://marslau.com/archives/811.html 饼图用于显示各项占总体的比例大小，不要用于各项间的比较关系。数据建议 1)单系列数据

迷南。/ 2022年10月06日 06:58/ 0 赞/ 307 阅读

相关 android中怎么画统计图

首先需要看图片，看过图片的才有发言权。 ![Center][] 效果就是这样的，画的效果还是不错的，能用的请收藏。首先，画折现统计图

梦里梦外;/ 2022年09月22日 14:58/ 0 赞/ 220 阅读

相关使用highChart做报表统计

下载Highcharts的包，导入到页面，这些都不用说了。直接来看代码的。这是页面代码： <%@ page language="java" contentType

Bertha 。/ 2022年08月11日 04:30/ 0 赞/ 177 阅读

相关【JavaFx教程】第六部分：统计图

![Screenshot AddressApp Part 6][] 第6部分的主题创建一个统计图显示生日的分布。 --------------------

你的名字/ 2022年05月10日 11:04/ 0 赞/ 337 阅读

相关前端怎么做用户行为统计分析

1.解释 > 用户行为统计分析，是指在获得网站访问量基本数据的情况下，对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目

╰半夏微凉°/ 2022年04月27日 19:42/ 0 赞/ 297 阅读

相关统计图表

统计图表一. 为什么要使用统计图表 1，数据可视化，用于分析 2，用于方便领导进行决策统计二. 需要支持的东西必须得有数据【不能少】，数据需要分类

电玩女神/ 2022年03月15日 12:24/ 0 赞/ 311 阅读

相关 ArcGIS API For JavaScript ECharts 图表统计图

GitHub的偶然碰见的资源，是使用ECharts2.x版本集成的 [https://github.com/guzhongren/ChartOnMap][https

水深无声/ 2021年09月15日 05:42/ 0 赞/ 435 阅读

相关 java怎么自动生成统计图_如何自动生成和发送计算机统计信息

![java怎么自动生成统计图][java] java怎么自动生成统计图 ![e05d3c6de37fe850b08bff94e90b289d.png][] It’s i

清疚/ 2021年07月26日 18:28/ 0 赞/ 371 阅读