AI 助理
备案控制台
开发者社区 大数据 文章 正文

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

2023-02-26 182
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【实战篇】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
凯小默
目录
相关文章
虫无涯
|
8月前
|
数据可视化 API Python
画图实战-Python实现某产品全年销量数据多种样式可视化
画图实战-Python实现某产品全年销量数据多种样式可视化
虫无涯
105 0
IT从业者张某某
|
8月前
|
数据可视化 数据挖掘 图形学
seaborn从入门到精通03-绘图功能实现01-关系绘图
seaborn从入门到精通03-绘图功能实现01-关系绘图
IT从业者张某某
172 0
王小王-123
|
数据库 Python
matplotlib绘制饼图之基本配置——万能模板案例
matplotlib绘制饼图之基本配置——万能模板案例
王小王-123
493 0
matplotlib绘制饼图之基本配置——万能模板案例
长沙红胖子Qt
|
关系型数据库 C++ 容器
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
长沙红胖子Qt
1457 0
Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解
朱卫军AI
|
5月前
|
数据可视化 API Python
一行代码让matplotlib图表变高大上
一行代码让matplotlib图表变高大上
朱卫军AI
48 0
漏刻有时
|
数据可视化
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时
145 1
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
IT从业者张某某
|
8月前
|
数据可视化 数据挖掘 Python
seaborn从入门到精通03-绘图功能实现05-构建结构化的网格绘图
seaborn从入门到精通03-绘图功能实现05-构建结构化的网格绘图
IT从业者张某某
82 0
seaborn从入门到精通03-绘图功能实现05-构建结构化的网格绘图
IT从业者张某某
|
8月前
|
数据可视化 API 前端开发
seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots
seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots
IT从业者张某某
167 0
seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots
漏刻有时
|
数据可视化 数据格式
漏刻有时数据可视化Echarts组件开发(10):唐宋八大家人物关系图
漏刻有时数据可视化Echarts组件开发(10):唐宋八大家人物关系图
漏刻有时
180 0
漏刻有时
|
数据可视化 API PHP
漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
漏刻有时
182 0

热门文章

最新文章

  • 1
    TMPFS详解
  • 2
    开源/免费/强大的移动端触摸滑动插件 — Swiper
  • 3
    阿里高级技术专家谈开源DDD框架：COLA4.1，分离架构和组件（下）
  • 4
    选择DDOS防御的几个关键因素
  • 5
    阿里云RPA（机器人流程自动化）干货系列之二：认识RPA（下）
  • 6
    对象存储 OSS图片高级压缩的功能使用及示例
  • 7
    蚂蚁端智能：超实时端特征中心的建设与实践
  • 8
    虚拟桌面Profile福音----View 5
  • 9
    Guice系列之用户指南（三）
  • 10
    一步一步学Mule ESB——（第二篇：Ajax篇）
  • 1
    Spring AI，搭建个人AI助手
    87
  • 2
    DeepSeek爆火，如何免费部署到你的电脑上？获取顶级推理能力教程来了
    1024
  • 3
    DiffuEraser：阿里通义实验室推出的视频修复模型，支持高清修复、时间一致性优化
    37
  • 4
    Baichuan-Omni-1.5：百川智能开源全模态理解与生成模型，支持文本、图像、音频和视频的多模态输入和输出
    48
  • 5
    深度学习中模型训练的过拟合与欠拟合问题
    102
  • 6
    Deploy Github Pages With GPG Signing
    86
  • 7
    NEON LiDAR 数据导出的地表数字模型 (DSM) 和地形数字模型 (DTM)1m分辨率
    86
  • 8
    ​2013-至今激光雷达点云树冠顶部距裸露地面的高度（树冠高度模型；CHM）1m分辨率
    24
  • 9
    NOAA 巴罗阿拉斯加观测站的受体在 1982 年至 2011 年这 30 年间 12 个选定年份（8 月 15 日至 10 月 15 日）的随机时间倒拉格朗日传输模型输出结果
    18
  • 10
    美团面试：MySQL为什么 不用 Docker部署？
    90

    • 相关课程

    更多
  • 【数据可视化】基础数据画图
  • 数据可视化理论与应用
  • 【从绘图开始】Python零基础入门

    • 相关电子书

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

    • 相关实验场景

    更多
  • DataV平面地图组件入门
  • 图表样式智能美化工具
  • 快速搭建移动端可视化看板
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • 通过可观测可视化Grafana版进行数据可视化展示与分析
    • 下一篇
    DataWorks售前咨询