说明
【跟月影学可视化】学习笔记。
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>
