Chartist.js 是一个非常简单而且实用的 JavaScript 前端图表生成器，它支持 SVG 格式，图表数据转换十分灵活，同时也支持多种图表展现形式，不失为一款前端开发者的开发利器。
效果图
后台逻辑处理代码 main.py：
# coding:utf-8
from flask import Flask, render_template, jsonify
import random
app = Flask(__name__)
@app.route('/')
def index():
return render_template('chart.html')
@app.route('/data')
def data():
# sample 从指定序列中随机获取指定长度的片断，sample函数不会修改原有序列
return jsonify({'results': random.sample(xrange(1, 10), 5)})
if __name__ == '__main__':
app.run(debug=True)
前段页面代码 chart.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="//cdn.bootcss.com/chartist/0.10.1/chartist.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/chartist/0.10.1/chartist.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<button>Update the Chart!</button>
<div class="ct-chart ct-perfect-fourth"></div>
<script type="text/javascript">
var chart;
var getData = $.get('/data');
// done 相当于 success 方法
getData.done(function (results) {
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
series: [
results.results
]
};
// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
// as you saw in the previous example
var options = {
width: 800,
height: 600
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
chart = new Chartist.Line('.ct-chart', data, options);
});
function updateChart() {
var updateData = $.get('/data');
updateData.done(function (results) {
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series data arrays
series: [
results.results
]
};
// update data
chart.update(data);
});
}
$('button').on('click', updateChart);
</script>
</body>
</html>
网友评论