为啥选择HTML

当涉及到数据可视化时，使用HTML作为图表的展示方式有很多好处。

1、HTML图表具有交互性。通过将图表嵌入到网页中，用户可以与图表进行实时的交互和探索。他们可以通过缩放、平移、悬停等操作，深入了解数据并获取更全面的信息。这种交互性使得图表更加动态和生动，能够提供更好的数据可视化体验。

2、HTML图表具有可嵌入性。通过将图表嵌入到网页中，可以将图表与其他网页元素进行无缝集成，形成一个统一的数据展示界面。这使得图表能够更好地融入到网站或应用程序的设计中，提升整体的可视化效果。

3、HTML图表具有广泛的共享性。由于HTML是一种广泛使用的标准化语言，几乎所有的设备和操作系统都支持浏览器，并且无需额外安装或配置任何软件。这意味着通过HTML生成的图表可以轻松地通过网络共享给其他人，而不必担心他们的设备或操作系统是否兼容。

4、HTML图表具有较高的定制性。通过使用CSS样式和JavaScript脚本，可以对图表进行灵活的定制。可以自定义图表的颜色、字体、线条样式以及交互行为等，以满足特定的设计要求和视觉效果。这使得图表能够更好地适应不同的品牌、风格和项目需求。

5、HTML图表具有可扩展性。有许多强大的JavaScript库和框架可供选择，如D3.js、Plotly.js和Highcharts等，它们提供了丰富的功能和各种类型的图表选项。这使得开发人员可以根据实际需求选择适合的工具和图表类型，并根据需要进行进一步的定制。

库的选择

在绘图过程中Matplotlib、Seaborn、Plotly、Bokeh、Altair、pyecharts等都是常使用的库，接下来我们基于pyecharts库进行叙述，接下来我们将库导入

import random
import pandas as pd
from pyecharts import options as opts

除了pyecharts的导入，random与pandas都是必不可少的。接下来我们就可以进行读取，运算以及绘制了。如果没有安装相应的库可以win+r然后输入cmd，在其中使用

pip insatll 相应的库

最好与镜像搭配使用如清华镜像

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple <相应的库>

图像的绘制

直方图

首先导入相应的库

from pyecharts import options as opts
from pyecharts.charts import Bar
import random
import pandas as pd

接下来进行直方图的绘制

 创建函数 create_comparison_histogram()，返回一个bar类

def create_comparison_histogram() -> Bar:
   

如果数据量大的时候，可以对数据进行间隔抽样，这里为间隔为10的抽样

sampled_data = data[::10]

从采样数据中提取日期列 (“Date”) 并转换为列表；将 “High” 列的数据转换为整数类型并转换为列表，并将结果分别存储在 categories、data1 和 data2 变量中。其中， categories作为x轴数据，data1与data2作为y轴数据,同时取data1与data2目的是对两个数据的对比，若你只绘画一组数据只需data一个变量即可。

categories = sampled_data["Date"].tolist()
data1 = sampled_data["你要提取的列"].astype(int).tolist()
data2 = sampled_data["你要提取的列"].astype(int).tolist()

.tolist() 是一个 pandas 方法，用于将 pandas 对象（如 Series 或 DataFrame）转换为 Python 列表。

创建柱状图对象并配置图表项并返回图标对象

 c = (
        Bar()
        .add_xaxis(categories)
        .add_yaxis("data 1", data1, category_gap="50%", color="#5470C6")
        .add_yaxis("data 2", data2, category_gap="50%", color="#91CC75")
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=-45)),
            yaxis_opts=opts.AxisOpts(name="Value"),
            title_opts=opts.TitleOpts(title="Comparison Histogram"),
            legend_opts=opts.LegendOpts(pos_left="center", pos_top="top"),
            toolbox_opts=opts.ToolboxOpts(orient="vertical", pos_right="25%", pos_top="middle"),
            datazoom_opts=[opts.DataZoomOpts()],
        )
    )
    return c

创建一个 Bar 类的实例对象 c，然后使用 add_xaxis() 添加 x 轴的数据 (日期)，使用 add_yaxis() 添加两个系列的 y 轴数据 (data1 和 data2)。其中，category_gap 参数用于设置各个柱子之间的间隔，“50%” 表示间隔为柱子宽度的一半。color 参数用于设置该系列的柱子颜色。

rotate=-45 表示标签将被旋转 -45 度。yaxis_opts 参数用于设置 y 轴的选项，

name="Value" 表示设置 y 轴的名称为 “Value”。title_opts 参数用于设置图表的标题，title="Comparison Histogram" 表示设置图表的标题为 “Comparison Histogram”。legend_opts 参数用于设置图例的位置，pos_left="center" 表示图例位于中心左侧，pos_top="top" 表示图例位于顶部。toolbox_opts 参数用于设置工具箱的选项，orient="vertical" 表示垂直排列工具箱，pos_right="25%" 表示工具箱位于右侧的 25% 位置，pos_top="middle" 表示工具箱位于垂直居中位置。datazoom_opts 参数用于设置数据缩放的选项，[opts.DataZoomOpts()] 表示启用数据缩放功能。

结果如上

如下为测试代码，可以使用下代码进行测试

from pyecharts import options as opts
from pyecharts.charts import Bar
import random

def create_comparison_histogram() -> Bar:
    categories = ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5"]
    data1 = [random.randint(0, 100) for _ in range(len(categories))]  # 随机生成data1数据
    data2 = [random.randint(0, 100) for _ in range(len(categories))]  # 随机生成data2数据

    c = (
        Bar()
        .add_xaxis(categories)
        .add_yaxis("data 1", data1, category_gap="50%", color="#5470C6")
        .add_yaxis("data 2", data2, category_gap="50%", color="#91CC75")
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=-45)),
            yaxis_opts=opts.AxisOpts(name="Value"),
            title_opts=opts.TitleOpts(title="Comparison Histogram"),
            legend_opts=opts.LegendOpts(pos_left="center", pos_top="top"),
            toolbox_opts=opts.ToolboxOpts(orient="vertical", pos_right="25%", pos_top="middle"),
            datazoom_opts=[opts.DataZoomOpts()],
        )
    )

    return c

chart = create_comparison_histogram()
chart.render("comparison_histogram.html")

 其中的数据替换为一组随机数

其他图表的绘制见下期