首页 > 其他分享 >Chart.js (v2.9.4)概要介绍

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

时间:2024-05-21 21:18:56浏览次数:21  
标签:插件 v2.9 渲染 chart js 源码 Chart

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:最后就是中间柱状图集合。柱状图是其中一种,其他还有

线性图:

气泡图:

 

环状图:

 

饼图:

 

极地图:

 

雷达图:

 

散射图:

 

 

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

 

标签:插件,v2.9,渲染,chart,js,源码,Chart
From: https://www.cnblogs.com/wuxianlong/p/17561659.html

相关文章

  • nodejs中express搭建本地web服务器
    constexpress=require("express");constfs=require("fs");constpath=require("path");constapp=express();//读取当前目录中public文件中所有文件constdirectorPath=path.join(__dirname,"public");app.get("/&quo......
  • js纯前端实现语音播报,朗读功能
    实现语音播报要有两个原生API分别是【window.speechSynthesis】【SpeechSynthesisUtterance】项目代码//执行函数letvoices,timerVoicestimerVoices=setInterval(()=>{voices=window.speechSynthesis.getVoices()if(voices.length){clearInter......
  • tensorflow.js示例笔记 - predict-download-time
    预测下载时间。<!DOCTYPEhtml><html><head><title>predict-download-time</title><style>canvas{border:1pxsolid#d3d3d3;}</style><sc......
  • tensorflow.js示例笔记 - mnist
    使用层来进行数字识别,使用tf.layersapi训练模型识别MNIST数据库中的手写数字。index.html<html><head><title>MNIST</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,......
  • tensorflow.js示例笔记 - boston-housing
    多元回归,比较不同的房价预测模型。index.html<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Mult......
  • tensorflow.js示例笔记 - iris
    根据鸢尾花的数据对花进行分类,使用神经网络对结构化(表格)数据进行分类。index.html<html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="......
  • Echarts 图例后面增加内容 报错option is not defind
    效果 需添加以下代码即可,与 series 平级formatter:function(name){letdata=option.series[0].data;lettotal=0;lettarValue;for(leti=0;i<data.length;i++){total+=data[i].value;if(data[i].name===name){tarValue......
  • echarts X轴字数太长显示不全,使用省略显示全部内容
    需求:echartsX轴字数太长显示不全,产品经理需要把多余的省略掉,然后鼠标悬浮的时候显示全部内容先说一下我的解决思路吧1.我先想到的是将xAxis里的data数据截取前六位,然后使用.substring(0,6)+'...'字符串截取去显示,发现不可行,因为那样鼠标悬浮还是会被截取掉的2.xAxis不行之后......
  • Jackson 库中@JsonProperty和@JsonAlias注解实现序列化反序列化
    Json序列化一般为实体转化生成的JSON数据中直接包含嵌套对象的属性ObjectMappermapper=newObjectMapper();Bookbook=newBook("LearningJava","Java");Writerwriter=newWriter(110,"Mohit",book);StringjsonWriter=......
  • 聊聊 JSON Web Token (JWT) 和 jwcrypto 的使用
    哈喽大家好,我是咸鱼。最近写的一个Python项目用到了jwcrypto这个库,这个库是专门用来处理JWT的,JWT全称是JSONWebToken,JSON格式的Token。今天就来简单入门一下JWT。官方介绍:https://jwt.io/introduction先聊聊TokenToken的意思是令牌,通常用于身份验证。例如,......