Charts.css：数据可视化的开源神器

简介数据可视化可以改善用户体验，因为数据的图形表示通常更容易理解。可视化帮助最终用户理解数据，而Charts.css帮助开发人员使用简单的CSS类将他们的数据转换为漂亮的图形。Charts.css是一个新的开源数据可视化框架。它用CSS框架取代了传统的JS图表库。传统的图表库往往使用JS来渲染数据，对JS的依赖度很高。大型JS库通常会影响网站性能，搜索引擎无法读取存储在JS对象中的数据。虽然Charts.css是一个现代CSS框架，但原始数据是HTML的一部分，使其对搜索引擎和网站可见；使用CSS不需要渲染，可以提高性能。支持多种数据展示形式，包括面积图、柱状图、柱状图、折线图、多数据集面积图、多数据集柱状图、多数据集柱状图、多数据集折线图、百分比柱状图图表、堆积柱形图、3D条形效果、3D倾斜效果等。Charts.css具有以下特点：纯前端，使用HTML和CSS构建易用的个性化定制，可以按照自己的方式设置图标样式开源，可以修改代码响应式支持多种图表types项目地址为：https://github.com/ChartsCSS/charts.css安装使用jsdelivrCDN导入：使用UnpkgCDN导入：使用npm安装：npminstallcharts.css用yarn安装：yarnaddcharts.css源码import://github.com/ChartsCSS/charts.css/releases//复制charts.min.css到你自己的项目中import只需使用Charts.css将原始数据放入HTML表格元素中，从而使其对搜索引擎可见。示例数据表：

CountryGold银牌铜牌美国GBR中国

2016SummerOlympicsMedalTable

46	37	38
27	23	17
26	18	26

要将数据显示为图表，只需在table元素的class属性中添加.charts-css并选择图表类型即可。单数据集表示表中每个tr元素只有一个td子元素：Data多数据集表示表中每个tr元素有多个td子元素:DataDataDatabarchart://单个数据集条形图...//多数据集柱状图...柱状图：//单数据集柱状图...//多数据集柱形图...每一种图表其实都是类似的代码（这也体现了这个库的易用性)，这里不再赘述，具体请参考官网。个性化要添加自定义CSS，只需将id或class添加到表格标签：//html...//css#my-chart{...}最好的做法应该是将图表类型添加到选择器中，这样CSS只适用于该图表类型，其他类型的图表不会受到影响：/*Customstyleappliesonlyonbarcharts*/#my-chart.bar{...}/*Otherstyleappliesonlyonpiecharts*/#my-chart.pie{...}3D效果：可以使用CSSbox-shadow属性#custom-effecttbodytd{margin-inline-start:10px;margin-inline-end:20px;box-shadow:1px-1px1pxlightgrey,2px-2px1pxlightgrey,3px-3px1pxlightgrey,4px-4px1pxlightgrey,5px-5px1pxlightgrey,6px-6px1pxlightgrey,7px-7px1pxlightgrey,8px-8px1pxlightgrey,9px-9px1pxlightgrey,10px-10px1pxlightgrey;}Motioneffect：当用户悬停在数据项上时，背景色会发生变化#motion-effecttr{transition-duration:0.3s;}#motion-effecttr:hover{background-color:rgba(0,0,0,0.2);}#motion-effecttr:hoverth{背景色:rgba(0,0,0,0.4);color:#fff;}动画效果：th元素每3秒旋转一次#animations-example-2th{animation:spin-labels3slinearinfinite;}@keyframesspin-labels{0%{transform:rotateX(0deg);}40%{反式sform:rotateX(360deg);}100%{transform:rotateX(360deg);}}