没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
django+echart数据动态显示的例子数据动态显示的例子
今天小编就为大家分享一篇django+echart数据动态显示的例子,具有很好的参考价值,希望对大家有所帮助。
一起跟随小编过来看看吧
目标:从plc采集数据到数据库,利用echart绘制实时动态曲线。
1 思路思路
- django定时执行任务,将数据推送到echart。
- 前端定时读取后端数据,并显示到echart上。
第一种思路貌似走不通,主要考虑第二种方式。
第二种方式首先想到的是利用javascript直接读取数据库,并定时更新echart曲线。
后来了解js只是前端语言,没有访问数据库的能力,因此最后转向ajax。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
这个正是我需要的功能。
2、任务分解、任务分解
- echart动态曲线显示如何实现(官方有例程)
- ajax如何使用(runoob ajax教程)
- django后台数据准备
3、执行、执行
ajax.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<script src="{% static 'myapp/json2.js'%}"></script>
<script src="{% static 'myapp/echarts.js'%}"></script>
<script src="{% static 'myapp/matplotlib.js'%}"></script>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="background-color:#eceaea; width: 800px; height:600px;"></div>
<div id="myDiv">
<h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>
<script>
var json = {{myContext | safe}}
var jstr = JSON.stringify(json)
var option = JSON.parse(jstr)
// console.log(option)
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'matplotlib');
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
资源评论
weixin_38589150
- 粉丝: 6
- 资源: 919
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功