备案控制台
探索云世界
开发者社区 大数据 文章 正文

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

2023-02-26 137
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表？

说明

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



QCharts 图表库

QCharts 是一个基于 spritejs 封装的图表库，可以让用户以组件的形式组合出各种图表：


https://www.qcharts.cn/#/home


113f4698be34467698c1e89ea8aa22d9.png



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>

a7513ba9e15645bf8ce54181bba2590e.png




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>

9cf3476418e94503b9ed4e3438c448d2.png



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>

335725ac6e394a31bcdb1ee901a43c42.png



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>

7d54fa2213024fadade405efd9e58459.png


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>

c67834ff9cb6475b902d17908b19e405.png



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>

a93db2c751654f8c95fdbe841c717e60.png


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>

1b2044b211564555b845efab5c4b2eaa.png


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>

a027479306404438aca4163b655c665b.png


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>

bc58b76c3f404387a05ef47ff6f87d37.png


如果想用不同类型的图形来展示多个变量，在 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>

a82d806ee59f4c478483fb1df2e309d5.png

文章标签：
数据可视化
CDN
凯小默
目录
相关文章
长沙红胖子Qt
|
关系型数据库 C++ 容器
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
长沙红胖子Qt
1194 0
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
泡沫o0
|
2月前
|
数据可视化 测试技术 uml
【掌握绘图艺术】用PlantUML绘制完美UML图表，开发者的福音
【掌握绘图艺术】用PlantUML绘制完美UML图表，开发者的福音
泡沫o0
165 1
前端歌谣
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
前端歌谣
50 0
lyshark
|
5月前
|
数据可视化 数据挖掘 API
C++ Qt开发：Charts绘制各类图表详解
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍`TreeWidget`与`QCharts`的常用方法及灵活运用。在之前的文章中笔者介绍了如何使用`QCharts`模块来绘制简单的折线图并对通用API接口进行了概括，本章我们通过在`TreeWidget`组件中提取数据，并依次实现柱状图、饼状图、堆叠图、百分比图、散点图等。
lyshark
68 5
C++ Qt开发：Charts绘制各类图表详解
漏刻有时
|
10月前
|
数据可视化
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时
71 1
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
前端歌谣
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
前端歌谣
48 0
漏刻有时
|
10月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析（地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色）
数据可视化大屏Echarts高级开发散点图实战案例分析（地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色）
漏刻有时
400 0
漏刻有时
|
10月前
|
数据可视化 定位技术 数据格式
漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例
漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例
漏刻有时
101 0
漏刻有时
|
10月前
|
Web App开发 数据可视化 JavaScript
漏刻有时数据可视化Echarts组件开发(23)：世界地图动态时间轴的散点气泡图
漏刻有时数据可视化Echarts组件开发(23)：世界地图动态时间轴的散点气泡图
漏刻有时
127 0
漏刻有时
|
10月前
|
数据可视化
漏刻有时数据可视化Echarts组件开发(20):动态数据 + 时间坐标轴
漏刻有时数据可视化Echarts组件开发(20):动态数据 + 时间坐标轴
漏刻有时
70 0

热门文章

最新文章

  • 1
    解决关于Windows Defender Antivirus Service自启造成运行python程序时，Windows的cpu和内存占用过高问题
  • 2
    订票系统不再瘫痪 阿里云确认与12306合作
  • 3
    iOS - 手动下架的应用后快速恢复上架
  • 4
    du 和 df以及lsof
  • 5
    库克：苹果不是只做富人生意，还一直坚持让世界变得更好
  • 6
    WiGig无线标准正式开始提供验证 最高可达8Gbps
  • 7
    IBM推出新的16位量子处理器
  • 8
    Android:随笔——对页面的View进行截图
  • 9
    shell MAC 地址 校验
  • 10
    【系统优化】数据库系统load飙高问题解决思路
  • 1
    DataWorks产品使用合集之DataWorks中，如果一个虚拟节点被设置为冻结状态，那么它的所有子节点也将被冻结如何解决
    21
  • 2
    DataWorks产品使用合集之DataWorks发布任务的方法如何解决
    25
  • 3
    DataWorks产品使用合集之DataWorks中，配置DataHub数据源如何解决
    21
  • 4
    Nacos 1.4.1核心功能组件及使用入门
    22
  • 5
    DataWorks产品使用合集之在 DataWorks 中，有一个 MySQL 数据表，数据量非常大且数据会不断更新将这些数据同步到 DataWorks如何解决
    14
  • 6
    基于直方图的图像阈值计算和分割算法FPGA实现,包含tb测试文件和MATLAB辅助验证
    13
  • 7
    DataWorks产品使用合集之在DataWorks中，要实现MySQL数据源的增量同步如何解决
    15

    • 相关课程

    更多
  • 【数据可视化】基础数据画图

    • 相关电子书

    更多
  • WebGL 在前端可视化中的实践
  • WebGL在数据可视化中的实践
  • 数据展现：可视化报表及嵌入应用

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考