ZoomCharts教学(一)——预章目录-国内全网首个zoomcharts教学

超、凢脫俗 2023-03-03 08:53 7阅读 0赞

# 1.什么是zoomcharts #

由Zoomcharts公司开发，全套四件，包含趋势图、柱形图、圆环图和网络图，提供无缝的钻取方式并配以流畅的动画效果，可以在更少的画布上展示更多的数据；允许用户在折线图、面积图、堆积柱形图和饼图等多种图表类型之间切换；包含丰富的自定义设置项，是目前唯一支持使用中文字体的图表。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70]  
Smart technology that makes working with data easy, engaging and productive

翻译过来就是  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][aHR0cDovLzViMDk4OGU1OTUyMjUuY2RuLnNvaHVjcy5jb20vaW1hZ2VzLzIwMTgwMjA0LzYyY2EyZjE0Mjk2ODQ1Yzk4YmRjMzkzYjA4NDExN2RjLmdpZg]

## ZoomCharts 特征 ##

令人印象深刻的Javascript图表 - 轻松集成JavaScript图表和向下钻取功能  
大图表少代码 - 在你的网站上只添加几行代码来实现你选择的图表  
复杂的功能 - 内置内容向下搜索和筛选功能  
提供多个数据源 - 如果需要，可以在同一图表中混合多个数据源  
智能数据聚合 - ZoomCharts为您聚合数据。每天提供数据，而缩放图表将能够提供数周或数月的数据自动聚合等

--------------------

内容“向下钻取”和“向上钻取” - 深入到特定的数据点或获得更大的图像。通过放大或缩小来与图表进行物理交互，从而在不同的数据级别上移动  
数据过滤 - 选择一个或多个数据点以查看特定数据  
跨图表连接 - 基于一个数据集显示多个图表。所有连接的图表都对其中任何一个图表中的数据过滤作出响应，因此不断地在每个图表中反映过滤后的数据  
使用多个手势导航 - 使用触摸屏设备或鼠标上的笔势进行导航，包括按一下缩放、拖动以展开时间线、点击或单击以查看一个数据点等

--------------------

处理大数据 - ZoomCharts 是为处理和可视化大量数据而构建的。存储在其他地方，必要的数据会根据浏览者的导航请求被提取出来

## How it Works ##

选择您的数据源 - 使用预加载的数据或与任何SQL/NoSQL数据库集成  
选择您的图表类型 - 从数百种图表类型中进行选择，并根据需要进行自定义  
获取代码 - 将ZoomCharts JavaScript库添加到Web项目中，并将交互式图表与几行JavaScript代码集成在一起  
沉浸式互动 - 图表是深度交互的，通过使用向下钻取和过滤，使用手势和单击来探索数据

在官网，有很多案例  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 2]

# 2.他能实现什么效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 5]

# 3.国内网站 #

https://zoomcharts.com/

# 4.教学目录 #

### 1. vue怎么整合 ###

### 2. 如何去掉水印 ###

### 3.创建一个简单的网状图(netChart) ###

### 4.netChart常用api ###

### 5.基于netChart创建pieChart ###

### 6. pieChart常用api ###

### 7. 敬请期待 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70]: /images/20230208/8b34b3747eb64267a367471055f2661d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 1]: /images/20230208/4ed6bc109d4243b39d0cab33f5dd7703.png
[aHR0cDovLzViMDk4OGU1OTUyMjUuY2RuLnNvaHVjcy5jb20vaW1hZ2VzLzIwMTgwMjA0LzYyY2EyZjE0Mjk2ODQ1Yzk4YmRjMzkzYjA4NDExN2RjLmdpZg]: /images/20230208/d0697b33ffe54b049aff9114b2918fc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 2]: /images/20230208/15d80bb06ad74d259a700afb346c9a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 3]: /images/20230208/312db2d8c727451da1b973f620385e42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 4]: /images/20230208/6de86b741a184c4ca483a1c9749ae724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70 5]: /images/20230208/8453ff1be26643478c7437c22d39be73.png