【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表？
2024-04-02 02:30:25
说明
【跟月影学可视化】学习笔记。
QCharts 图表库
QCharts 是一个基于 spritejs 封装的图表库，可以让用户以组件的形式组合出各种图表：https://www.qcharts.cn/#/home
QCharts 图表的基本用法
最简单的方式是，直接通过 CDN，用 script 标签来加载 SpriteJS 和 QCharts 打包好的文件。
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script>
QCharts 图表由图表（Chart）对象及其子元素构成。图表对象的子元素包含：
- 图形（Visual）：必选元素
- 其他插件（Plugin)：可选元素
基本用法：
- 创建一个图表对象
- 将数据内容与图表对象通过
chart.source方法绑定起来 - 给图表指定图形
- 使用
chart.append将它添加到 chart 对象的子元素中
QCharts 绘制折线图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制折线图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Line, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "05-01", catgory: "图例一", sales: 15.2 },{ date: "05-02", catgory: "图例一", sales: 39.2 },{ date: "05-03", catgory: "图例一", sales: 31.2 },{ date: "05-04", catgory: "图例一", sales: 65.2 },{ date: "05-05", catgory: "图例一", sales: 55.2 },{ date: "05-06", catgory: "图例一", sales: 75.2 },{ date: "05-07", catgory: "图例一", sales: 95.2 },{ date: "05-08", catgory: "图例一", sales: 100 },];chart.source(data, {row: "catgory",value: "sales",text: "date",});const line = new Line();const axisBottom = new Axis().style("grid", false);const axisLeft = new Axis({ orient: "left" }).style("axis", false);const legend = new Legend();const tooltip = new Tooltip();chart.append([line, axisBottom, axisLeft, legend, tooltip]);</script></body>
</html>
QCharts 绘制面积图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制面积图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Area, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "05-01", catgory: "图例一", sales: 15.2 },{ date: "05-02", catgory: "图例一", sales: 39.2 },{ date: "05-03", catgory: "图例一", sales: 31.2 },{ date: "05-04", catgory: "图例一", sales: 65.2 },{ date: "05-05", catgory: "图例一", sales: 55.2 },{ date: "05-06", catgory: "图例一", sales: 75.2 },{ date: "05-07", catgory: "图例一", sales: 95.2 },{ date: "05-08", catgory: "图例一", sales: 100 },];chart.source(data, {row: "catgory",value: "sales",text: "date",});const area = new Area();const axisBottom = new Axis().style("grid", false);const axisLeft = new Axis({ orient: "left" }).style("axis", false);const legend = new Legend();const tooltip = new Tooltip();chart.append([area, axisBottom, axisLeft, legend, tooltip]);</script></body>
</html>
QCharts 绘制柱状图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制柱状图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Bar, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "05-01", catgory: "图例一", sales: 15.2 },{ date: "05-02", catgory: "图例一", sales: 39.2 },{ date: "05-03", catgory: "图例一", sales: 31.2 },{ date: "05-04", catgory: "图例一", sales: 65.2 },{ date: "05-05", catgory: "图例一", sales: 55.2 },{ date: "05-06", catgory: "图例一", sales: 75.2 },{ date: "05-07", catgory: "图例一", sales: 95.2 },{ date: "05-08", catgory: "图例一", sales: 100 },];chart.source(data, {row: "catgory",value: "sales",text: "date",});const bar = new Bar();const axisBottom = new Axis().style("grid", false);const axisLeft = new Axis({ orient: "left" }).style("axis", false);const legend = new Legend();const tooltip = new Tooltip();chart.append([bar, axisBottom, axisLeft, legend, tooltip]);</script></body>
</html>
QCharts 绘制饼图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制饼图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Pie, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "05-01", sales: 15.2 },{ date: "05-02", sales: 39.2 },{ date: "05-03", sales: 31.2 },{ date: "05-04", sales: 65.2 },{ date: "05-05", sales: 55.2 },{ date: "05-06", sales: 75.2 },{ date: "05-07", sales: 95.2 },{ date: "05-08", sales: 100 },];chart.source(data, {row: "date",value: "sales",text: "date",});const pie = new Pie();const legend = new Legend();const tooltip = new Tooltip();chart.append([pie, legend, tooltip]);</script></body>
</html>
QCharts 绘制雷达图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制雷达图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Radar, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "血量", category: "德玛西亚盖伦", sales: 120 },{ date: "攻击", category: "德玛西亚盖伦", sales: 140 },{ date: "魔法", category: "德玛西亚盖伦", sales: 100 },{ date: "蓝条", category: "德玛西亚盖伦", sales: 95 },{ date: "防御", category: "德玛西亚盖伦", sales: 160 },{ date: "魔抗", category: "德玛西亚盖伦", sales: 100 },];chart.source(data, {row: "category",value: "sales",text: "date",});const radar = new Radar().style("scale", false);radar.style("section", (d) => ({ opacity: 0.3 }));const legend = new Legend({ align: ["center", "90%"] });const tooltip = new Tooltip();chart.append([radar, legend, tooltip]);</script></body>
</html>
QCharts 绘制仪表盘
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制仪表盘</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Gauge } = qcharts;const chart = new Chart({ container: "#app" });const gauge = new Gauge({min: 0,max: 100,percent: 50,lineWidth: 20,tickStep: 10,});gauge.style("title", { fontSize: 36 });chart.append(gauge);</script></body>
</html>
QCharts 绘制玉玦图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制玉玦图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, RadialBar, Legend, Tooltip } = qcharts;const chart = new Chart({container: "#app",});const data = [{type: "苹果",count: 1111,},{type: "香蕉",count: 2222,},{type: "梨子",count: 3333,},{type: "草莓",count: 4444,},{type: "芒果",count: 5555,},{type: "榴莲",count: 6666,},].sort((a, b) => a.count - b.count);chart.source(data, {row: "type",text: "type",value: "count",});const radialBar = new RadialBar({min: 0,max: 10000,radius: 0.6,innerRadius: 0.1,lineWidth: 10,});radialBar.style("arc", { lineCap: "round" });const legend = new Legend({orient: "vertical",align: ["30%", "center"],});chart.append([radialBar, legend, new Tooltip()]);</script></body>
</html>
QCharts 绘制南丁格尔玫瑰图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制南丁格尔玫瑰图</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, PolarBar, Tooltip, Legend } = qcharts;const chart = new Chart({container: "#app",});const data = [{product: "05-08",year: "图例一",sales: 30,},{product: "05-08",year: "图例二",sales: 15,},{product: "05-08",year: "图例三",sales: 20,},{product: "05-09",year: "图例一",sales: 30,},{product: "05-09",year: "图例二",sales: 17,},{product: "05-09",year: "图例三",sales: 20,},{product: "05-10",year: "图例一",sales: 17.57,},{product: "05-10",year: "图例二",sales: 24,},{product: "05-10",year: "图例三",sales: 37.54,},{product: "05-11",year: "图例一",sales: 41,},{product: "05-11",year: "图例二",sales: 28,},{product: "05-11",year: "图例三",sales: 21,},{product: "05-12",year: "图例一",sales: 14,},{product: "05-12",year: "图例二",sales: 25,},{product: "05-12",year: "图例三",sales: 35,},{product: "05-13",year: "图例一",sales: 44,},{product: "05-13",year: "图例二",sales: 25,},{product: "05-13",year: "图例三",sales: 10,},{product: "05-14",year: "图例一",sales: 25,},{product: "05-14",year: "图例二",sales: 25,},{product: "05-14",year: "图例三",sales: 10,},{product: "05-15",year: "图例一",sales: 25,},{product: "05-15",year: "图例二",sales: 25,},{product: "05-15",year: "图例三",sales: 10,},];chart.source(data, {row: "year",value: "sales",text: "product",});const bar = new PolarBar({stack: true,radius: 0.8,groupPadAngle: 15,}).style("pillar", {strokeColor: "#FFF",lineWidth: 1,});const tooltip = new Tooltip();const legend = new Legend({orient: "vertical",align: ["30%", "center"],});chart.append([bar, tooltip, legend]);</script></body>
</html>
QCharts 绘制图表组合
绘制图表组合最简单的情况是用相同的图形来绘制不同的变量。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制图表组合</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Line, Legend, Tooltip, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "1月", catgory: "降水量", val: 15.2 },{ date: "2月", catgory: "降水量", val: 19.2 },{ date: "3月", catgory: "降水量", val: 11.2 },{ date: "4月", catgory: "降水量", val: 45.2 },{ date: "5月", catgory: "降水量", val: 55.2 },{ date: "6月", catgory: "降水量", val: 75.2 },{ date: "7月", catgory: "降水量", val: 95.2 },{ date: "8月", catgory: "降水量", val: 135.2 },{ date: "9月", catgory: "降水量", val: 162.2 },{ date: "10月", catgory: "降水量", val: 32.2 },{ date: "11月", catgory: "降水量", val: 32.2 },{ date: "12月", catgory: "降水量", val: 15.2 },{ date: "1月", catgory: "气温", val: 2.2 },{ date: "2月", catgory: "气温", val: 3.2 },{ date: "3月", catgory: "气温", val: 5.2 },{ date: "4月", catgory: "气温", val: 6.2 },{ date: "5月", catgory: "气温", val: 8.2 },{ date: "6月", catgory: "气温", val: 15.2 },{ date: "7月", catgory: "气温", val: 25.2 },{ date: "8月", catgory: "气温", val: 23.2 },{ date: "9月", catgory: "气温", val: 24.2 },{ date: "10月", catgory: "气温", val: 16.2 },{ date: "11月", catgory: "气温", val: 12.2 },{ date: "12月", catgory: "气温", val: 6.6 },];chart.source(data, {row: "catgory",value: "val",text: "date",});const line = new Line({ axisGap: true });const axisBottom = new Axis().style("grid", false);const axisLeft = new Axis({ orient: "left" }).style("axis", false);const legend = new Legend();const tooltip = new Tooltip();chart.append([line, axisBottom, axisLeft, legend, tooltip]);</script></body>
</html>
如果想用不同类型的图形来展示多个变量，在 QCharts 中，我们只需要创建多个不同的图形对象，然后把它们都添加到 chart 对象的子元素中去即可。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>QCharts 绘制图表组合2</title><style>html,body {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}#app {width: 100%;height: 100%;border: 1px dashed salmon;}</style></head><body><div id="app"></div><script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script><script>const { Chart, Line, Bar, Legend, Axis } = qcharts;const chart = new Chart({container: "#app",});const data = [{ date: "1月", catgory: "降水量", val: 15.2 },{ date: "2月", catgory: "降水量", val: 19.2 },{ date: "3月", catgory: "降水量", val: 11.2 },{ date: "4月", catgory: "降水量", val: 45.2 },{ date: "5月", catgory: "降水量", val: 55.2 },{ date: "6月", catgory: "降水量", val: 75.2 },{ date: "7月", catgory: "降水量", val: 95.2 },{ date: "8月", catgory: "降水量", val: 135.2 },{ date: "9月", catgory: "降水量", val: 162.2 },{ date: "10月", catgory: "降水量", val: 32.2 },{ date: "11月", catgory: "降水量", val: 32.2 },{ date: "12月", catgory: "降水量", val: 15.2 },{ date: "1月", catgory: "气温", val: 2.2 },{ date: "2月", catgory: "气温", val: 3.2 },{ date: "3月", catgory: "气温", val: 5.2 },{ date: "4月", catgory: "气温", val: 6.2 },{ date: "5月", catgory: "气温", val: 8.2 },{ date: "6月", catgory: "气温", val: 15.2 },{ date: "7月", catgory: "气温", val: 25.2 },{ date: "8月", catgory: "气温", val: 23.2 },{ date: "9月", catgory: "气温", val: 24.2 },{ date: "10月", catgory: "气温", val: 16.2 },{ date: "11月", catgory: "气温", val: 12.2 },{ date: "12月", catgory: "气温", val: 6.6 },];chart.source(data, {row: "catgory",value: "val",text: "date",});const ds = chart.dataset;const d1 = ds.selectRows("降水量");const line = new Line({ axisGap: true }).source(d1).style("point", { strokeColor: "#fff" });const axisLeft = new Axis({orient: "left",formatter: (val) => {return `${val} ml`;},}).style("axis", false).style("scale", false).source(d1);const d2 = ds.selectRows("气温");const bar = new Bar().source(d2);bar.style("pillar", { fillColor: "salmon" });const axisRight = new Axis({orient: "right",formatter: (val) => {return `${val} °C`;},}).style("axis", false).style("scale", false).source(d2);const axisBottom = new Axis().style("scale", true).style("grid", false);const legend = new Legend({ align: ["center", "bottom"] }).style("point", (i, j, k) => {return {borderRadius: 10,bgcolor: k === 0 ? "#47A1FF" : "salmon",};}).style("text", { fontSize: 12 });chart.append([bar, line, axisBottom, axisLeft, axisRight, legend]);</script></body>
</html>
【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表？相关推荐
- 《快速掌握PyQt5》第三十六章 用PyQtGraph绘制可视化数据图表
第三十六章 用PyQtGraph绘制可视化数据图表 36.1 下载PyQtGraph 36.2 基础知识与用法 36.3 将PyQtGraph嵌入到PyQt5中 36.4 小结 <快速掌握PyQ ...
- f-scan足底压力分析二：对象、单元统计、绘制压力数据图表、ASCII DATA
目录 对象 在movie或实时窗口中添加窗格 在movie或实时窗口中添加取样区box 栅格调整 grid adjustement 改变对象显示的数据 选择新位置放置取值区标签 单元格统计 绘制单元格 ...
- java图表库_Java版ECharts图表库ECharts-Java
ECharts是一款功能非常强大的JavaScript图表库, 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结 ...
- 上班族最常用数据图表分析软件有哪些
大数据及移动互联网时代,每一个使用移动终端的人无时无刻不在生产数据,而作为互联网服务提供的产品来说,也在持续不断的积累数据.数据如同人工智能一样,往往能表现出更为客观.理性的一面,数据可以让人更加直观 ...
- scrapy爬取天气存MySQL_Scrapy实战篇（五）之爬取历史天气数据
本篇文章我们以抓取历史天气数据为例,简单说明数据抓取的两种方式: 1.一般简单或者较小量的数据需求,我们以requests(selenum)+beautiful的方式抓取数据 2.当我们需要的数据量较 ...
- python 制作数据图表_python制作各种数据图表
工具集合 数据由python处理,所以首先需要安装python,官网下载即可.可以不用安装python的编辑器,自己用Notepad写就可以. 安装图表处理库pyecharts,命令是:pip ins ...
- 第10章第14节：使用iSlide的图表库往幻灯片中插入精美的图表 [PowerPoint精美幻灯片实战教程]
您将在本节通过图表库工具,往幻灯片中插入精美的图表,首先点击此处的图表库工具,打开图表库窗口. 然后在所需的图表的缩略图上点击,即可将图表插入到幻灯片. 点击右上角的关闭图标,关闭图表库窗口. 使用键 ...
- Vue实战篇二十六：创建动态仪表盘
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue实战篇三十三：实现新闻的浏览历史
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
最新文章
- NeHe OpenGL第四十一课：体积雾气
- A - Supercentral Point CodeForces - 165A
- vue右键复制粘贴功能_这可能是最高效的复制粘贴方法
- opwnert挂载摄像头
- SpringMVC 项目中 Quartz 定时任务的设置纪要
- linux互信封装脚本,使用shell脚本实现自动SSH互信功能
- java自定义类加载器
- Exchanger和无GC的Java
- linux网络编程之广播详细代码及文档说明 -,Linux网络编程之广播
- oracle报sp20042,oracle中ora-04301故障处理
- AndroidStudio_HttpServer类接收到数据以后_给Service发送Message_利用handler实现---Android原生开发工作笔记224
- 如何设置程序默认“以管理员身份运行”
- Linux 下载GCC
- 分区助手是什么？（博主推荐）（图文详解）
- 基于Myrocks和spider构建分布式数据库
- JAVA读取Excel表格，建数据库建表，并生成java实体实例
- 淘宝直播窄带高清技术
- 【山外笔记-计算机网络·第7版】第10章：计算机网络重要概念
- gimp: 如何透明化背景
- linux暂停进程运行的按键组合是,Linux基础命令（五）：进程——ps、top、jobs、bg、fg、kill、killall、shutdown...
热门文章
- 【VRP】基于matlab遗传算法求解多中心车辆路径规划问题【含Matlab源码 1965期】
- javaString-StringBuilder-StringBuffer
- Kubernetes 三大探针及探针方式
- Aria2c 使用举例
- Zotero翻译插件Zotero PDF Translate无法正常翻译，百度、彩云、腾讯翻译api接入
- 数据可视轻松制作多点飞线图
- java Excel读写
- java.applet.Applet类
- PID控制算法实践应用（一）：PID算法的离散化
- android 8.0 edittext,android – Autofill框架更新8.1导致EditText崩溃