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

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

2023-02-26 243
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【实战篇】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 chart图表（温度曲线实战）
QT chart图表（温度曲线实战）
花落已飘
667 0
小小工匠
|
缓存 监控 前端开发
每日一博 - 闲聊 API GateWay
每日一博 - 闲聊 API GateWay
小小工匠
263 0
梦笔生花伟
|
算法
经典控制算法——PID算法原理分析及优化
这篇文章介绍了PID控制算法，这是一种广泛应用的控制策略，具有简单、鲁棒性强的特点。PID通过比例、积分和微分三个部分调整控制量，以减少系统误差。文章提到了在大学智能汽车竞赛中的应用，并详细解释了PID的基本原理和数学表达式。接着，讨论了数字PID的实现，包括位置式、增量式和步进式，以及它们各自的优缺点。最后，文章介绍了PID的优化方法，如积分饱和处理和微分项优化，以及串级PID在电机控制中的应用。整个内容旨在帮助读者理解PID控制的原理和实际运用。
梦笔生花伟
1614 1
人不走空
|
关系型数据库 MySQL 数据库
深入探讨MySQL并发事务的问题及解决方案
深入探讨MySQL并发事务的问题及解决方案
人不走空
871 0
蚝油菜花
|
10月前
|
存储 人工智能 开发框架
Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
Kheish 是一个开源的多智能体协调平台，基于大型语言模型（LLM）设计，能够通过灵活配置多个智能体来解决复杂任务。平台支持模块化集成、聊天式提示、反馈循环等功能，适用于代码审计、法律文件分析、客户服务自动化等多种应用场景。
蚝油菜花
275 18
Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
游客5fdji2pvmf8888
|
11月前
|
人工智能 算法 搜索推荐
探索人工智能与大数据的融合之道####
本文深入探讨了人工智能（AI）与大数据之间的紧密联系与相互促进的关系，揭示了二者如何共同推动科技进步与产业升级。在信息爆炸的时代背景下，大数据为AI提供了丰富的学习材料，而AI则赋予了大数据分析前所未有的深度与效率。通过具体案例分析，本文阐述了这一融合技术如何在医疗健康、智慧城市、金融科技等多个领域展现出巨大潜力，并对未来发展趋势进行了展望，强调了持续创新与伦理考量的重要性。 ####
游客5fdji2pvmf8888
422 1
shuj
|
11月前
|
SQL 安全 算法
网络安全的屏障与钥匙：漏洞防护与加密技术解析
【10月更文挑战第31天】在数字世界的海洋中，网络安全是航船的坚固屏障，而信息安全则是守护宝藏的金钥匙。本文将深入探讨网络安全的薄弱环节——漏洞，以及如何通过加密技术加固这道屏障。从常见网络漏洞的类型到最新的加密算法，我们不仅提供理论知识，还将分享实用的安全实践技巧，帮助读者构建起一道更加坚不可摧的防线。
shuj
163 1
jianz123
|
11月前
|
监控
DDN是什么,DDN专线的优势详解
数字数据网（DDN）是一种利用数字信道提供稳定、可靠的数据信号传输服务的网络。它支持点到点的数字传输，适用于大数据量、高实时性和强保密性的需求，如数据、图像和话音传输。DDN具有连接灵活、服务多样和技术成熟等优点，适合商业和金融等行业使用。与SDH和ISDN相比，DDN不具交换功能，但能提供更广泛的传输速率和更高的灵活性。
jianz123
737 8
阿里云开发者
|
Dart API C++
手把手教你写 Dart ffi
本文以step by step的方式说明了Dart ffi的使用，适合新手学习。
阿里云开发者
481 8
源码星辰
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架，每个框架都有自己的特点和优势，开发者可以根据项目需求选择适合的框架。
源码星辰
643 0

热门文章

最新文章

  • 1
    MacOS安装FFmpeg
  • 2
    ElasticSearch容器化从0到1实践（一）
  • 3
    vue入门002~vue项目的两种创建方式
  • 4
    linux命令之w
  • 5
    javascript中的function不存在重载的概念
  • 6
    windows xp 激活补丁
  • 7
    迷宫的基本实现
  • 8
    十五天精通WCF——第九天 高级玩法之自定义Behavior
  • 9
    Linux shell编程 11 ---- 变量的高级用法
  • 10
    揭秘：太空座舱中如何烤面包
  • 1
    基于springboot的大学公文收发管理系统
    204
  • 2
    《重构工业运维链路：三大AI工具让设备故障“秒定位、少误判”》
    36
  • 3
    《法务RAG开发不踩坑：Kiln+LlamaIndex+Helicone的协同方法指南》
    30
  • 4
    基因编辑，能不能让咱吃得更安全？
    36
  • 5
    API 别乱跑：自动化运维里的流量管理秘籍
    32
  • 6
    别再靠“人海战术”了：数据如何帮社交媒体搞定内容审核？
    40
  • 7
    基于springboot的考研互助小程序
    215
  • 8
    仅包含外推轨道元数据的文件，可通过 SDP 工具包读取，二进制格式
    27
  • 9
    ERROR: pip’s dependency resolver does not currently take into 报错-Python项目依赖冲突的解决方案-优雅草优雅草卓伊凡
    25
  • 10
    桌面版exe安装和Python命令行安装2种方法详细讲解图片去水印AI源码私有化部署Lama-Cleaner安装使用方法-优雅草卓伊凡
    39

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证