Python使用Flask框架，结合Highchart处理jsonl数据

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);
复制代码

 

posted @   哈喽哈喽111111  阅读(264)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示