首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)

画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)

作者头像
红目香薰
发布2023-01-14 09:23:15
6490
发布2023-01-14 09:23:15
举报
文章被收录于专栏:CSDNToQQCodeCSDNToQQCode

画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)

目录

画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)

前言

学习环境

探究目标

分析过程

实践过程

测试js使用:

成果显示

总结

前言

        本系列文章主要针对Python语言【pyecharts】库生成折线图功能进行深入探究与二次开发而撰写的,专栏文章的作用是帮助大家在工作中【快速】、【高效】、【美观】、【大气】的展示各种适合【折线图】的数据,且只针对折线图,我相信折线图才是最美的图表,在折线图中你能找到真正的数学之美,当前只针对生成网页类型可以截图使用,也可以通过录制操作过程生成小视频的方式使用,后期我会想办法针对视频自动演示进行研究,可能前几十篇或甚至是上百篇文章都是对折线图的具体探究与深度学习,后面的文章我会写一些功能类的GUI工具,用于生成各类折线图,有望在2024年的年会PPT汇报上给予大家【唯美】的帮助。

学习环境

系统环境:win11 开发工具:PyCharm Community Edition 2022.3.1 Python版本:Python 3.9.6 Pythob库:主要是【pyecharts】,如果涉及到网络获取则需要依赖爬虫的库,可参考【看完这个,还不会【Python爬虫环境】,请你吃瓜

探究目标

由于pyecharts生成的文件是html文件,那么,如果我们想自定义一些样式应该怎么样操作呢,如果纯原生的写js那可是非常麻烦的呢,所以我们引入jQuery插件来方便我们操作页面。

分析过程

在Python没办法直接写引入js啊,我在官网中找到了使用js的方法【pyecharts - A Python Echarts Plotting Library built with love.】,在这里面我找到了这个函数:

注释说的是:【新增 js 代码,js 代码会被渲染进 HTML 中执行】,有这个东西我们就能想办法通过js来引入jQuery了。

实践过程

测试js使用:

尝试修改body的背景颜色:

c = Line()
c.add_js_funcs(
    """
        document.bgColor="skyblue";
    """
)

很明显成功了 

说明我们可以直接写js,但是我们需要引入jQuery来方便我们操作。

我准备了一个jQuery在线文档:【https://code.jquery.com/jquery-3.4.1.min.js】我们可以使用这个尝试是否能加载成功,由于我们无法直接引入,故而我们需要使用DOM的方式进行引入:

var newScript= document.createElement("script");
newScript.type="text/javascript";
newScript.src="jquery-3.4.1.min.js";
var head=document.getElementsByTagName("head")[0];
head.appendChild(newScript);

我们去测试下。直接执行页面后去页面查看一下:

尝试使用jQuery:

$("title").html("折线图");

在使用过程出现问题:

应该是没有加载完成jQuery就开始使用,故而无法找到【$】符号,我们可以使用一个定时器延迟加载一下。

// 使用jQuery修改html的title
// 由于jQuery加载速度较慢,我们需要延迟一下使用jQuery
setTimeout(() => {
        $("title").html("折线图");
    }, 1000);

成果显示

总结

我们使用【add_js_funcs】函数向代码中添加了js文件,并且通过延迟加载的方式成功的使用了jQuery文件,那么本次实验成功,此方法可行。

专栏地址:【https://blog.csdn.net/feng8403000/category_12170925.html

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-01-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
  • 前言
  • 学习环境
  • 探究目标
  • 分析过程
  • 实践过程
    • 测试js使用:
    • 成果显示
    • 总结
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档