Python使用Flask框架,结合Highchart处理jsonl数据
2024-08-30 23:14:30
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 Highcharts 图表</title>
<!-- 引入 jquery.js -->
<script src="static/jquery-3.3.1.min.js"></script>
<!-- 引入 highcharts.js -->
<script src="static/highcharts-7.0.3.js"></script>
<style>
#data {
display: none;
}
</style> </head>
<body> <!-- 图表容器 DOM -->
<div id="container"></div>
<pre id="data">
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
</pre> <script src="static/b.js"></script>
</body>
</html>
2.js代码
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
var jsonStr = document.getElementById('data').innerHTML,
jsonData = JSON.parse(jsonStr);
options.series[0].data = jsonData;
Highcharts.chart('container', options);
最新文章
- iOS系列 基础篇 05 视图鼻祖 - UIView
- Java 判断文件夹、文件是否存在、否则创建文件夹
- Day20_IO第二天
- 用Canvas写一个炫酷的时间更新动画玩玩
- Vue.js相关知识2-组件
- 关于getClass().getClassLoader()
- 杭电2034——人见人爱A-B
- 导出Excel文件
- Sdut 2164 Binomial Coeffcients (组合数学) (山东省ACM第二届省赛 D 题)
- contenteditable模仿textarea文本框
- HDU 3346 Lucky Number
- Java基础知识二次学习--第三章 面向对象
- 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法
- Dynamics CRM 通过RetrieveEntityRibbonRequest和RetrieveApplicationRibbonRequest导出实体的Ribbon XML
- Windows之MySQL安装教程
- erlang二进制
- 关于Facebook和Google+授权登录
- JDBC概述
- Certbot让网站拥有免费https证书
- Modelsim使用常见问题集锦(实时更新)
热门文章
- YTU 2632: B2 友元光顾
- bzoj1531
- Hadoop MapReduce 运行步骤
- 25.EXTJS 主页面的jsp
- Eclipse出现Class Not Found异常时可以参考我所知道的一个方案
- Objective-C NSObject与运行时系统
- hdu4738(边双连通分量,桥)
- 理想的正方形 HAOI2007(二维RMQ)
- [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(2)添加一个 App Store 图标
- 第四代增强 源代码增强(ABAP Source Code Enhancements)