Python visualization tools
python has many chemical data visualization, such as the common matplotlib, but talked about the gorgeous visual effects and dynamic interactivity, should be the most beautiful of the Echarts. With Echarts can make a lot of nice graphics. Python also has pyecharts, but this single chart can also display a page to do simple, do a complete project case more trouble.
I almost know nothing about js, but looked grammatical structure, still very close to the python and C ++, and js data transmission, usually by pushing POST + ajax json data is completed (perhaps I have seen too little), this statement more common, the sentence can be done to resolve the above individual needs Echarts use data-driven. This is a common way of thinking.
Flask driving Echarts roadmap
- Page design charts, references echarts.js, design diagrams framework
- Chart frame embedded in the received data ajax
- Flask sent chart page echarts.html
- Transfer data transmission Flask json
- Json data after receiving the browser rendering the chart page echarts, run containing the ajax js
- json data filling echarts, chart page rendering is complete
From this roadmap look, starting flask is sent to the browser data to the browser, it is only two "GET", not too difficult.
Subsequently, distribution embodiment.
1. Design chart page
Echarts.js incorporated in the head
leaving Dom in a container body, which are common operations
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<!-- 定义echarts结构的JavaScript -->
</body>
</html>
The next design is defined echarts JavaScript object structure in the body.
Item_name representative of the X-axis with the name of echarts, item_value represents the name of a value corresponding to
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//建立ajax所需的json数据
var json_data=
{ item_name:[], item_value:[] };
//发送ajax数据请求
$(document).ready(function()
{
getData();
});
</script>
2. The received data is embedded ajax chart frame
Next, ajax designed to receive data into getDta (function).
After ajax, the data is loaded into the chart.
To fix an error processing.
Can be seen, ajax received is encapsulated json, i.e. the text of the dictionary. This background, is simply too convenient.
function getData()
{
$.ajax({
url:'/echart_json', //渲染的是/ehart_json下的json数据
data:{}, //接收数据存放的位置
type:'GET', //此处是从服务器获取数据，不涉及发送，因此是GET
async:false, //异步请求 同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行,默认false
dataType:'json',
success:function(data)
{ json_data=data;
// 指定图表的配置项和数据
var option =({
title: {text:'大灯材料类型'},
tooltip: {},
legend: { data:['材料'] },
//X轴是由json发送的字典中item_name获取的
xAxis: { data: json_data['item_name']},
yAxis: {},
//Y轴数据系列1的data是由json发送的字典中item_value获取的
series: [{name: '数量',
type: 'bar',
data: json_data['item_value']}]
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption(option); // 初次加载图表
},
//如获取数据失败，则提示
error:function(msg)
{ console.log(msg);
alert("数据加载失败！请检查数据链接是否正确");}
})
After this part of the function of the design is complete, just put the JavaScript. This function is copied from the Internet, but it does not look very laborious.
3.Flask sent chart page
Add chart page view routing code in the code:
from flask import Flask,Response,request
from flask import url_for
from flask import render_template
import json
app = Flask(__name__)
@app.route('/echarts')
def echarts():
return render_template('echarts.html',title='echarts')
Chart Json data transmission 4.Flask
Json added transmission data in the view routing code, the code:
def Response_headers(content):
resp = Response(content)
resp.headers['Access-Control-Allow-Origin'] = '*'
return resp
@app.route('/echart_json')
def get_data():
item_name = ['LED', '卤素', '氙气']
item_value = ['266', '126', '15']
datas = {'item_name': item_name, 'item_value': item_value}
# 如果有中文的话，就需要ensure_ascii=False
content = json.dumps(datas, ensure_ascii=False)
resp = Response_headers(content)
return resp
The browser render the page to receive data
6.Echarts format adjustment
(1) The following is a histogram parameter settings, reference blog: https: //blog.csdn.net/qq_42816550/article/details/91604978
written very clearly, the intention.
Disclaimer: This article is CSDN bloggers' struggle has no choice except "original article, follow the CC 4.0 BY-SA copyright agreements, please attach a reprint
//定义图表option
var option = {
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
title: {
//主标题文本，'\n'指定换行
text: '2013年广州降水量与蒸发量统计报表',
//主标题文本超链接
link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
//副标题文本，'\n'指定换行
subtext: 'www.stepday.com',
//副标题文本超链接
sublink: 'http://www.stepday.com/myblog/?Echarts',
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top'
},
//提示框，鼠标悬浮交互时的信息提示
tooltip: {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
},
//图例，每个图表最多仅有一个图例
legend: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['蒸发量','降水量']
},
//工具箱，每个图表最多仅有一个工具箱
toolbox: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
show: true,
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true},
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
dataZoom: {
show: true,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
}
},
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: {show: true, type: ['line', 'bar']},
//restore，还原，复位原始图表
restore: {show: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage: {show: true}
}
},
//是否启用拖拽重计算特性，默认关闭(即值为false)
calculable: true,
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
xAxis: [
{
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
//纵轴通常为数值型，但条形图时则纵轴为类目型
yAxis: [
{
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，纵轴默认为数值型'value'
type: 'value',
//分隔区域，默认不显示
splitArea: {show: true}
}
],
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
series: [
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '蒸发量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//系列中的数据标注内容
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
//系列中的数据标线内容
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '降水量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//系列中的数据标注内容
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
//系列中的数据标线内容
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
//为echarts对象加载数据
myChart.setOption(option);
}
);
(2) there is a more important is the formatter setting
This is tooltip entire graphic formatter, you can set the mouse over the prompt text
tooltip: {
trigger: 'item',
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: "{a} <br/>{c} ({d}%)" //显示 “系列名称 系列名称 20 （50%）”之类的效果
}
There are series of famatter set in the label:
itemStyle: { normal:
{ label:
{formatter: "{c}\n{d}%",
show: true,
position: "inside",
textStyle: {fontWeight: "bolder", fontSize: "12",color: "#000000" } }
}
}
You can display the number of the next row percentage effect pie chart.
7.Echarts final results
The following are the final results after the adjustment, the others have
critical is json data in the background input, query the database using the pymysql turn json this difficulty is very small.
So, in this way, open up the connection to the database and visualization Echarts interface, it can be said a very interesting thing.
