实战篇37 # 如何使用 QCharts 图表库绘制常用数据图表？

Posted 2023-01-11 凯小默

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实战篇37 # 如何使用 QCharts 图表库绘制常用数据图表？相关的知识，希望对你有一定的参考价值。

说明

【跟月影学可视化】学习笔记。

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", 数据篇34 # 如何处理多元变量？
 数据篇34 # 如何处理多元变量？
 实战篇38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表？
 实战篇38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表？
 Python数据可视化：商业图表可视化（实战篇—4）
 Vue 开发实战实战篇 # 35：如何高效地使用Mock数据进行开发