服务端动态渲染图表
参考文章链接：https://www.highcharts.com.cn/docs/dynamic-produce-html-page
参考文章是使用php写的，我这边改用python写
具体如下：
1.目录结构：
ajax_demo
ajax_demo.py
templates
-index.html
static
-jquery-3.3.1.min.js
-highcharts-7.0.3.js
2.ajax_demo.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
data = {
'text1':'对数折线图',
'data1':[1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
}
return render_template('index.html',**data)
if __name__ == '__main__':
app.run(debug=True)
3..index.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> </head>
<body> <!-- 图表容器 DOM -->
<div id="container" style="min-width:500px;height:500px"></div> <script>
var chart = Highcharts.chart('container', {
title: {
text: '{{ text1 }}'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: {{ data1 }},
pointStart: 1
}]
}); </script> </body>
</html>
注意：series中的data使用的是{{ data1 }}方式，没有加引号，但是title中的text使用的是'{{ text1 }}'的方式，加的有引号。后者若不加引号，则不显示图表。
其他参数估计也类是，凡是字符串的数据，从服务端传递过来数据，都需要加上引号。