【愚公系列】2023年03月 Python工具集合-cutecharts图表可视化

举报
愚公搬代码 发表于 2023/03/31 22:42:11 2023/03/31
【摘要】 前言数据可视化是一种方法，可以通过图表、图形和图像的形式，将数据直观地呈现给人们。这样，人们就可以很容易地理解和分析数据，并从中获得有价值的信息。数据可视化的目的是让人们对数据有更直观的理解，并能更容易地发现数据之间的联系和模式。在商业、科学研究、教育和其他领域，数据可视化都是一种非常有用的工具。cutecharts，这是一个纯 Python 语言编写的可视化工具，就像其名字一样，这是一个...

前言

数据可视化是一种方法，可以通过图表、图形和图像的形式，将数据直观地呈现给人们。这样，人们就可以很容易地理解和分析数据，并从中获得有价值的信息。数据可视化的目的是让人们对数据有更直观的理解，并能更容易地发现数据之间的联系和模式。在商业、科学研究、教育和其他领域，数据可视化都是一种非常有用的工具。

cutecharts，这是一个纯 Python 语言编写的可视化工具，就像其名字一样，这是一个可以产生 cute 版图表的工具。

cutecharts官网：https://github.com/cutecharts/cutecharts.py

image.png

一、cutecharts图表可视化

1.安装包

cutecharts

image.png

2.柱状图

柱状图是一种可视化工具，可以帮助我们比较不同类别的数据之间的相对大小，以及观察数据之间的趋势和变化。

from cutecharts.charts import Bar, Line
from cutecharts.faker import Faker
from cutecharts.components import Page

#Faker.choose()为label、Faker.values()为值
def bar_base() -> Bar:
    chart = Bar("Bar-基本示例")
    chart.set_options(labels=Faker.choose(), x_label="I'm xlabel", y_label="I'm ylabel")
    chart.add_series("series-A", Faker.values())
    return chart

page = Page()
page.add(bar_base())
page.render()

image.png

生成的html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
</head>
<body>
        <div id="2c3ae03d1a604ebaae4ab4b9ea196d14" class="chart-container" style="width: 800px">
        <svg id="chart_2c3ae03d1a604ebaae4ab4b9ea196d14"></svg>
    </div>
    <script>
        const svg_2c3ae03d1a604ebaae4ab4b9ea196d14 = document.querySelector('#chart_2c3ae03d1a604ebaae4ab4b9ea196d14')
        const chart_2c3ae03d1a604ebaae4ab4b9ea196d14 = new chartXkcd.Bar(svg_2c3ae03d1a604ebaae4ab4b9ea196d14, {"title": "Bar-\u57fa\u672c\u793a\u4f8b", "data": {"datasets": [{"label": "series-A", "data": [24, 76, 84, 46, 73, 21, 34]}], "labels": ["\u6cb3\u9a6c", "\u87d2\u86c7", "\u8001\u864e", "\u5927\u8c61", "\u5154\u5b50", "\u718a\u732b", "\u72ee\u5b50"]}, "xLabel": "I'm xlabel", "yLabel": "I'm ylabel", "options": {"yTickCount": 3}});
    </script>
</body>
</html>

image.png

效果
image.png

3.折线图

折线图可以用来展示数据之间的变化，帮助人们快速理解数据的趋势和关系。它们可以用来研究价格的变化，了解不同时期的销售量，分析数据及其关系等等。

from cutecharts.charts import Line
from cutecharts.components import Page
from cutecharts.faker import Faker


def line_base() -> Line:
    chart = Line("Line-基本示例")
    chart.set_options(labels=Faker.choose(), x_label="I'm xlabel", y_label="I'm ylabel")
    chart.add_series("series-A", Faker.values())
    chart.add_series("series-B", Faker.values())
    return chart

line_base().render()

image.png

生成的html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
</head>
<body>
    <div id="1ddb52c241e84a5f94c92ced976b516c" class="chart-container" style="width: 800px">
        <svg id="chart_1ddb52c241e84a5f94c92ced976b516c"></svg>
    </div>
    <script>
        const svg_1ddb52c241e84a5f94c92ced976b516c = document.querySelector('#chart_1ddb52c241e84a5f94c92ced976b516c')
        const chart_1ddb52c241e84a5f94c92ced976b516c = new chartXkcd.Line(svg_1ddb52c241e84a5f94c92ced976b516c, {"title": "Line-\u57fa\u672c\u793a\u4f8b", "data": {"datasets": [{"label": "series-A", "data": [146, 83, 124, 130, 102, 72, 26]}, {"label": "series-B", "data": [130, 108, 144, 92, 102, 80, 36]}], "labels": ["\u886c\u886b", "\u6bdb\u8863", "\u9886\u5e26", "\u88e4\u5b50", "\u98ce\u8863", "\u9ad8\u8ddf\u978b", "\u889c\u5b50"]}, "xLabel": "I'm xlabel", "yLabel": "I'm ylabel", "options": {"yTickCount": 3, "legendPosition": 1}});
    </script>
</body>
</html>

image.png

效果
image.png

4.饼图

饼图是一种常用的图表，可用于快速比较各个分类的相对数量或占比。它可以帮助你更容易地理解数据，并找出其中的规律和趋势。

from cutecharts.charts import Pie
from cutecharts.components import Page
from cutecharts.faker import Faker


def pie_base() -> Pie:
    chart = Pie("Pie-基本示例")
    chart.set_options(labels=Faker.choose())
    chart.add_series(Faker.values())
    return chart


pie_base().render()

image.png

生成的html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
</head>
<body>
    <div id="799cd9af55344a1f8eb716c9f98a8f1c" class="chart-container" style="width: 800px">
        <svg id="chart_799cd9af55344a1f8eb716c9f98a8f1c"></svg>
    </div>
    <script>
        const svg_799cd9af55344a1f8eb716c9f98a8f1c = document.querySelector('#chart_799cd9af55344a1f8eb716c9f98a8f1c')
        const chart_799cd9af55344a1f8eb716c9f98a8f1c = new chartXkcd.Pie(svg_799cd9af55344a1f8eb716c9f98a8f1c, {"title": "Pie-\u57fa\u672c\u793a\u4f8b", "data": {"datasets": [{"data": [100, 127, 23, 31, 50, 127, 146]}], "labels": ["\u886c\u886b", "\u6bdb\u8863", "\u9886\u5e26", "\u88e4\u5b50", "\u98ce\u8863", "\u9ad8\u8ddf\u978b", "\u889c\u5b50"]}, "options": {"innerRadius": 0.5, "legendPosition": 1}});
    </script>
</body>
</html>

image.png

效果
image.png

5.雷达图

雷达图是一种有效的可视化工具，可以帮助你更好地理解和比较数据。它以多边形的形式将多个变量的值显示出来，具有很好的可视化效果。

from cutecharts.charts import Radar
from cutecharts.components import Page
from cutecharts.faker import Faker


def radar_base() -> Radar:
    chart = Radar("Radar-基本示例")
    chart.set_options(labels=Faker.choose())
    chart.add_series("series-A", Faker.values())
    chart.add_series("series-B", Faker.values())
    return chart


radar_base().render()

image.png

生成的html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
</head>
<body>
    <div id="6736c8e78f564ce89fb89632642cea4e" class="chart-container" style="width: 800px">
        <svg id="chart_6736c8e78f564ce89fb89632642cea4e"></svg>
    </div>
    <script>
        const svg_6736c8e78f564ce89fb89632642cea4e = document.querySelector('#chart_6736c8e78f564ce89fb89632642cea4e')
        const chart_6736c8e78f564ce89fb89632642cea4e = new chartXkcd.Radar(svg_6736c8e78f564ce89fb89632642cea4e, {"title": "Radar-\u57fa\u672c\u793a\u4f8b", "data": {"datasets": [{"label": "series-A", "data": [123, 28, 127, 38, 49, 38, 50]}, {"label": "series-B", "data": [59, 29, 37, 116, 68, 86, 24]}], "labels": ["\u5468\u4e00", "\u5468\u4e8c", "\u5468\u4e09", "\u5468\u56db", "\u5468\u4e94", "\u5468\u516d", "\u5468\u65e5"]}, "options": {"showLegend": true, "showLabel": true, "tickCount": 3, "legendPosition": 1}});
    </script>
</body>
</html>

image.png

效果
image.png

6.散点图

散点图用于表示两个变量之间的关系，可以用来帮助分析数据，发现趋势和模式，并帮助进行预测。

from cutecharts.charts import Scatter
from cutecharts.components import Page
from cutecharts.faker import Faker


def scatter_base() -> Scatter:
    chart = Scatter("Scatter-基本示例")
    chart.set_options(x_label="I'm xlabel", y_label="I'm ylabel")
    chart.add_series(
        "series-A", [(z[0], z[1]) for z in zip(Faker.values(), Faker.values())]
    )
    chart.add_series(
        "series-B", [(z[0], z[1]) for z in zip(Faker.values(), Faker.values())]
    )
    return chart


scatter_base().render()

image.png

生成的html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
</head>
<body>
    <div id="11819ce9a80e4047a22dbd93917d41b1" class="chart-container" style="width: 800px">
        <svg id="chart_11819ce9a80e4047a22dbd93917d41b1"></svg>
    </div>
    <script>
        const svg_11819ce9a80e4047a22dbd93917d41b1 = document.querySelector('#chart_11819ce9a80e4047a22dbd93917d41b1')
        const chart_11819ce9a80e4047a22dbd93917d41b1 = new chartXkcd.XY(svg_11819ce9a80e4047a22dbd93917d41b1, {"title": "Scatter-\u57fa\u672c\u793a\u4f8b", "data": {"datasets": [{"label": "series-A", "data": [{"x": 120, "y": 144}, {"x": 112, "y": 80}, {"x": 44, "y": 66}, {"x": 90, "y": 104}, {"x": 49, "y": 105}, {"x": 75, "y": 114}, {"x": 43, "y": 116}]}, {"label": "series-B", "data": [{"x": 139, "y": 124}, {"x": 150, "y": 133}, {"x": 109, "y": 142}, {"x": 127, "y": 103}, {"x": 57, "y": 101}, {"x": 129, "y": 84}, {"x": 145, "y": 124}]}]}, "xLabel": "I'm xlabel", "yLabel": "I'm ylabel", "options": {"xTickCount": 3, "yTickCount": 3, "legendPosition": 1, "showLine": false, "dotSize": 1}});
    </script>
</body>
</html>

image.png

效果
image.png

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Python 数据可视化
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入