Chart.js (v2.9.4)概要介绍

chart,js,v2 · 浏览次数 : 0

小编点评

**Chart布局** Chart布局主要分为以下六个区域: 1. **标题**:位于图表的顶部,可以配置为上下左右,且是在左右或上下居中。 2. **轴**:根据数据源渲染X/Y轴以及X/Y的title,以及中间区域网格线。 3. **legend**:负责渲染图表当前包含数据集合的种类,并控制哪些集合显示,哪些集合不显示,位置也可以为上下左右,亦是上下或是左右居中。 4. **提示**:中间黑色弹框部分,负责渲染鼠标停留处,当前dataset的相关属性。 5. **数据集**:用于创建图表的柱状图集合。 6. **数据控制器**:中间柱状图集合。 **数据控制器** 数据控制器负责创建图表时,根据配置的选项,创建相应的图表。它包含以下主要方法: * **create()**:创建新的图表元素。 * **append()**:将图表元素添加到容器中。 * **render()**:将图表渲染到指定的元素中。 * **update()**:更新图表的样式和数据。 **其他函数** 除了`create()`,`append()`,`render()`和`update()`之外,还有以下一些重要函数: * **getDataContext()**: 获取数据控制器中当前数据点的上下文。 * **getData()**: 获取数据控制器中当前数据点的值。 * **getScale()**: 获取轴的缩放器。 * **getLegend()**: 获取图例控制器。

正文

chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求。

具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件.

 

Chart布局大概分为如下六个区域,这些是主要的,也有些特殊,比如左右两边都有Y轴,这个用的较少

 

Chart.js的源码也是根据这几个分区,定义了不同的的函数,负责渲染这几个部分,分工非常明确直观。

Title:为整个chart图表的标题, 它的位置可以配置为上下左右,且都是左右或是上下居中。

Scale(X/Y): 根据提供的数据源,负责渲染X/Y轴,以及X/Y的title,和中间区域网格线。

Legend:负责渲染图表当前包含数据集合的种类,并控制哪些集合显示,哪些集合不显示,位置也可以为上下左右,亦是上下或是左右居中。

Tip:中间黑色弹框部分,负责渲染鼠标停留处,当前dataset的相关属性。

在chart.js源码中,他们对应的构造函数都是从Element() 扩展而来,也就是这几个函数都继承自Element(),  理解这个很重要,是了解chart.js源码的关键之一,后面的会详细介绍这个函数。

DatasetController:最后就是中间柱状图集合。柱状图是其中一种,其他还有

线性图:

气泡图:

 

环状图:

 

饼图:

 

极地图:

 

雷达图:

 

散射图:

 

 

这几种图也可以混合使用,比如

 

与Chart.js (v2.9.4)概要介绍相似的内容:

Chart.js (v2.9.4)概要介绍

chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求。 具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件. Chart布局大概分为如下六个区域,这些是主要的,也有些特殊,比如左右两边都有Y轴,这个用的较少

Chart.js (v2.9.4) 2-主要的函数和对象介绍

Color() :主要负责渲染图表时候,针对颜色处理相关函数 helpers_core:工具对象,提供了基础的工具函数功能,遍历数组,扩展对象,合并对象,克隆对象等等。 core_defaults:负责存储系统默认的全局属性或是插件,用户通过这个全局对象配置一些通用的属性或是插件,轻松让所有实例化出

Vue第三方库与插件实战手册

这篇文章介绍了如何在Vue框架中实现数据的高效验证与处理,以及如何集成ECharts、D3.js、Chart.js等图表库优化数据可视化效果。同时,探讨了Progressive Web App(PWA)的接入与优化策略,以提升Web应用的用户体验与加载速度。

使用Helm部署Wikijs

使用 Helm 部署 Wiki.js 📚️ 参考文档: Wiki.js 官方文档 - 安装 - Kubernetes Wiki.js 使用 Helm 安装 Wiki.js 官方文档 - 安装 - 侧加载 官方教程 Kubernetes 开始使用 Helm Chart 在 Kubernetes 上安

Kubernetes(K8S) helm chart

感觉和放到一个 yaml 文件中,用 分隔,操作繁琐程度上,没有太大区别 创建自定义 Chart # 创建自定义的 chart 名为 mychart [root@k8smaster ~]# helm create mychart Creating mychart [root@k8smaster ~]

[python] 基于PyWaffle库绘制华夫饼图

华夫饼图Waffle chart是一种独特而直观的图表,用于表示分类数据。它采用网格状排列的等大小方格或矩形,每个方格或矩形分配不同的颜色或阴影来表示不同的类别。这种可视化方法有效地传达了每个类别在整个数据集中的相对比例。本文介绍如何使用基于Python的PyWaffle库绘制华夫饼图。PyWaff

全球海洋测深DEM(GEBCO)数据集 下载

1、概述 GEBCO(General Bathymetric Chart of the Oceans)全球 DEM数据集(Geo-Engineering Digital Savage)是基于“全球地球系统计划”(Global Earth System Project)的最新数据集。 GEBCO 数据

flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用

原创自研flutter3.x+getx仿制ios手机桌面UI管理系统模板Flutter3-OS。 flutter3-osx基于最新跨平台技术Flutter3.22+Dart3.4+GetX+fl_chart实战仿IOS风格手机os管理系统。全新自研flutter磁贴式栅格布局引擎、分屏式多页管理、自

使用甘特图制定清晰可量化的项目计划

今天跟同事请教项目管理问题时,get到一个项目管理的小技巧,就是使用`甘特图`来制定清晰可量化的项目计划, 简单的甘特图模版下载可参考此网站: - https://www.vertex42.com/ExcelTemplates/simple-gantt-chart.html 或者从本站直接下载: -

用代码玩转迷你图:手把手教你用编程语言打造简洁易读的数据图表!

摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:[葡萄城官网](https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 # 前言 迷你图(Mini Chart)最早起源于流程图和组织架构图中的一种简化图形,用于表示一