JavaScript和HTML文档 - 网络统计学编程

avaScript（简称JS）是一种广泛用于Web开发的脚本语言，用于为网页添加交互性和动态内容。它是一种高级、解释性、基于对象和事件驱动的编程语言，由Netscape公司首先引入并在1995年推出。JavaScript通常嵌入在HTML文档中，并通过Web浏览器在客户端执行。

JavaScript的语法基于C语言，但也借鉴了Java和其他编程语言的特点。它支持动态类型，允许在运行时更改变量的类型，不需要提前声明变量的类型。JavaScript也是一种弱类型语言，它会自动进行类型转换，使得在一些情况下比较灵活，但也需要小心处理类型相关的问题。

JavaScript可以用于处理各种任务，包括但不限于网页动态交互、表单验证、动画效果、数据处理、服务器端开发（如Node.js）、移动应用开发（如React Native）等。JavaScript具有丰富的标准库，提供了很多内置对象和函数，同时也支持通过第三方库（如jQuery、React、Vue等）扩展其功能。

JavaScript具有事件驱动的编程模型，可以对用户的操作或其他事件做出响应。通过事件处理器，可以捕捉和处理用户的鼠标点击、键盘输入、页面加载完成等事件，从而实现丰富的交互体验。

导读：

JavaScript代码嵌入HTML文档
JavaScript代码运行方式
第一个实例
JavaScript的三种对话框
定义JavaScript变量
JavaScript运算符和操作符
JavaScript的转义字符

JavaScript脚本语言(JS)的特点：

JavaScript是一种解释性脚本语言（代码不进行预编译）；
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为；
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离；
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

JavaScript是一种网页脚本语言，被广泛用于Web应用开发。可以使用JS添加、删除、修改网页上的所有元素及属性；在HTML网页中动态写入文本、数字和插入图表；响应网页中的事件，并做出相应处理。了解JS编程后，可以轻松调用各类网络统计学库函数和在网页上统计数据处理或分析。

一、JavaScript嵌入HTML文档

1、JavaScript代码嵌入HTML文档

【#Code 101】：JavaScript代码嵌入HTML文档案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style>
    网页内部样式CSS代码
</style>
<script language="JavaScript">
//*JavaScript脚本代码*
</script>
</head>
<body>
    文档体HTML代码
</body>
</html>

注：JavaScript脚本代码在<script language="JavaScript">...</script>标签之间

2、JavaScript代码运行方式

(1) 网页打开时自动调用JS代码

【#Code 102】：网页打开时自动调用JS代码案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style>
		网页内部样式CSS代码
</style>
<script language="JavaScript">
//*JavaScript脚本代码*
function init() {
		alert("加载网页时提示我!");
}
</script>
</head>
<body onload="init()">
		文档体HTML代码
</body>
</html>

注：可复制代码到WINDOWS记事本，保存为HTML文档。例如，“jsTest1.html”。鼠标双击该文件观察效果

代码【#Code 102】中，浏览器解析完HTML文档体代码后，触发body标签的onload网页加载事件，从而运行JS函数init()。

(2) 用页面按钮或超链接触发JS代码

【#Code No.103】：用页面按钮或超链接触发JS代码案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style>
		网页内部样式CSS代码
</style>
<script language="JavaScript">
//*JavaScript脚本代码*
function init() {
		alert("加载网页时提示我!");
}
</script>
</head>
<body>
<button onclick="init()">运行JS函数init()</button>
<p><i>用鼠标左键点击命令按钮JS函数。</i></p><br/>
<a href="#" onclick="init()">运行JS函数init()</a>
<p><i>
由于href="#"没有指定连接文件，用鼠标左键点击超链接时onclick事件运行运行JS函数init()。
  </i></p><br/>
</body>
</html>

注：JavaScript脚本代码中的标点符号都必须为半角英文字符。JavaScript脚本可以插入注释语句，注释语句增加代码可读性，不被浏览器解析执行。符号"/.../"为单行注释，符号"/*...*/"为多行行注释

例如：

<script language="JavaScript">
//这是单行注释
/*
	这是多行注释；
	银河网络统计学教程。
*/
}
</script>

二、JavaScript语法

1、第一个实例

打开网页时，浏览器中显示"Hello World!

【#Code 104】：第一个网页“Hello World!”案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style></style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
}
</script>
</head>
<body onload="init()">
</body>
</html>

2、JavaScript的三种对话框

（1）提醒对话框，不能对脚本产生任何改变，脚本样例：

alert("提醒对话框");

在网页中的运用参见#Code 102。

（2）确认对话框，返回true或者false，可以用于if...else...判断用户的选择，脚本样例：

confirm("你确信要学习网络统计学吗？")

confirm函数返回true或者false，网页设计中运用实例，

【#Code 105】：JavaScript确认对话框案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程 </title>
<style> </style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
firm()；
}
function firm() {
//利用对话框返回的值（true或者false）
		if(confirm("你确信要学习网络统计学吗？")) {
				alert("我确信要学习网络统计学！");
		} else {
				alert("我学习网络统计学有困难！");
				}
}
</script>
</head>
<body onload="init()">
</body>
</html>

（3）输入对话框，可以返回用户填入的字符串或数值，脚本样例：

var name=prompt("请输入您的名字",""); //将输入的内容赋给变量name

注：脚本中符号“//”为注释符，可在“//”符号后面加入脚本解释

prompt函数返回用户填入的字符串或数值，网页设计中运用实例，

【#Code 106】：JavaScript输入对话框案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
prom()；
}
function prom() {
var name=prompt("请输入您的名字","张三"); //将输入的内容赋给变量name
if(name) { //如果返回的有内容
		alert("欢迎您："+ name)
		}
}
</script>
</head>
<body onload="init()">
</body>
</html>

注:prompt有两个参数，前面是提示的信息，后面是当对话框出来后，在对话框里的默认值

3、定义JavaScript变量

JavaScript是弱类型语言，声明变量时用var关键字（注意var要全部小写）就可以了。而很多编程语言声明变量时，需要指明变量的类型，如：int, double, string, boolean, date, array, object等；而且变量类型一旦指定，就不能改变了。但在JavaScript中不同，只需用var，且数据类型可以改变。但要请注意变量的命名规：

变量名不能以数字开头(如123);
变量名不能使用JavaScript关键字(如var);
变量名中只能有下划线、美元符、字母和数字。不能出现’/’这种特殊字符(如My/age)

通常使用var（或let）关键字定义变量，如:

var total=346; //定义整数变量（int）
var value=45.7865 //定义浮点型变量（double）
var notNull=true; //定义逻辑型变量（boolean）
var name="张三", gender="男"; //用逗号分隔，同行定义两个字符型变量（string）
var i=j=0; //同时定义两个变量（int）
var hobby=["听音乐","看电影"]; //定义数组变量（array）
var d = new Date(); //定义日期时间变量（date）

注：代码中关键字var可以替换为let，但let关键字在同一作用域不能重复定义

【#Code 107】：JavaScript变量使用案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style></style>
<script language="JavaScript">
var myName = "银河统计学"; //myName是全局变量
function init() {
    var total=346;
    var value=45.7865;
    var notNull=true;
    var name="张三", gender="男";
    var i=j=0;
    var hobby=["听音乐","看电影"];
    hobby[2]="打篮球"; //数组赋值
    stdId = 2016; //全局变量
    var d = new Date(); //定义日期时间变量（date）
    document.write("变量i="+i+"<br/>");
    document.write("变量j="+j+"<br/>");
    document.write("变量name="+name+"<br/>");
    document.write("变量gender="+gender+"<br/>");
    document.write("变量notNull="+notNull+"<br/>");
    document.write("变量hobby="+hobby+"<br/>");
    document.write("变量hobby[0]="+hobby[0]+"<br/>");
    document.write("变量hobby[1]="+hobby[1]+"<br/>");
    document.write("变量hobby[2]="+hobby[2]+"<br/>");
    document.write("变量hobby[3]="+hobby[3]+"<br/>");
    document.write("变量d="+d+"<br/>");
    document.write("变量d.getFullYear()="+d.getFullYear()+"<br/>"); //参见JS日期对象
  	var ostr=	"<p/><i>下面调用函数test()，输出该函数体内的全局和局部变量。";
    ostr+="<br/>全局可以输出，局部变量局部变量total无法输出。</i><p/>";
    document.write( ostr);
    test();
}

function test() {
    document.write("全局变量myName="+myName+"<br/>");
    document.write("全局变量stdId="+stdId+"<br/>");
    document.write("局部变量total="+total+"<br/>");
}
</script>
</head>
<body onload="init()">
</body>
</html>

注：代码中"+="为连加运算符，将一行过长代码分段代码连接起来；"变量name="+name+"<br/>"中符号"+"连接字符串和变量

4、JavaScript运算符和操作符

算术操作符： +（加）、–（减）、*（乘）、/（除）、%（取模）
字符串操作符： +（字符串连接）、+=（字符串连接复合）
布尔操作符：！（非、not）、&&（且、and）、||（或、or）
一元操作符： ++（累加）、--（累减）、+（一元加）、-（一元减）
关系比较操作符： <（小于）、<=（小于等于）、>（大于）、>=（大于等于）、!=（不等于）、==（等于）、===（类型相同）、!==（类型不同）
按位操作符： ~（按位非）、&（按位与）、|（按位或）、^（按位异或）、<<（左移）、>>（有符号右移）、>>>（无符号右移）
赋值操作符：复合赋值（+=、-=、*=、%=）、复合按位赋值（~=、&=、|=、^=、<<=、>>=、>>>=)

JavaScript操作符比较复杂，下面介绍JS运算符和常用操作符。

（1）算数操作符

除了加号（+）之外，如果操作数不是Number类型，会自动先调用Number()将其转换为Number类型再进行计算；除号（/）和取模（%）并不会区分整数和浮点数，都会自动转化为浮点数。

（2）字符串操作符

字符串连接符号（+）相当于concat()函数，会将操作数据转化为字符串再连接。在字符串和数值型进行+号运算时，会将数值型转为字符串。

（3）布尔操作符

布尔逻辑操作符！（非、not）、&&（与、and）、||（或、or）常和if等条件函数一起判断一个变量或属性是否有定义。

【#Code 108】：JavaScript运算符和操作符案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>银河网络统计学教程</title>
<style></style>
<script language="JavaScript">
document.write("<p><b>//算术操作符</b></p>");
var x = 11;
var y = 5;
with (document) { //注意with关键字用法，其用于简化代码
        write("x = 11, y = 5");
        write("<br>x + y 是 ", x + y);
        write("<br>x - y 是 ", x - y);
        write("<br>x * y 是 ", x * y);
        write("<br>x / y 是 ", x / y);
        write("<br>x % y 是 ", x % y);
        write("<br>++ x 是 ", ++ x);
        write("<br>-- y 是 ", -- y);
        write("<br>x 是 ", x);
        write("<br>y 是 ", y);
        write("<br>x-- 是 ", x--);
        write("<br>y-- 是 ", y--);
        }

document.write("<p><b>//++运算练习</b></p>");
var x = y = 3;
with (document) {
write("y++=",(y++),"<br>");
write("++y=",(++y),"<br>");
write("x = 3, y = 5 <br>");
write("若x = y++ 运算之后：");
x = y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 运算：");
x = ++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}

document.write("<p><b>//++运算练习</b></p>");
var t = true;
var f = false;
with(document) {
        write("true && true 的结果是 ", t && t);
        write("<br>true && false 的结果是 ", t && f);
        write("<br>false && true 的结果是 ", f && t);
        write("<br>false && false 的结果是 ", f && f);
        write("<br>true && (1==1) 的结果是 ", t && (1==1));
        write("<br>false && 'A' 的结果是 ", f && 'A');
        write("<br>'A' && false 的结果是 ", 'A' && f);
        write("<br>true && 'A' 的结果是 ", t && 'A');
        write("<br>'A' && true 的结果是 ", 'A' && t);
        write("<br>'A' && 'B' 的结果是 ", 'A' && 'B');
        write("<br>1 && 1 的结果是 ", 1 && 1);
        write("<br>1 && 0 的结果是 ", 1 && 0);
        write("<br>true && 0 的结果是 ", true && 0);
        write("<br>true && 1 的结果是 ", true && 1);
        write("<br>true && '0' 的结果是 ", true && '0');
}

document.write('<p><b>//逻辑运算符"||"</b></p>');
var t = true;
var f = false;
with(document) {
        write("true || true 的结果是 ", t || t);
        write("<br>true || false 的结果是 ", t || f);
        write("<br>false || true 的结果是 ", f || t);
        write("<br>false || false 的结果是 ", f || f);
        write("<br>true || (1==1) 的结果是 ", t || (1==1));
        write("<br>false || 'A' 的结果是 ", f || 'A');
        write("<br>'A' || false 的结果是 ", 'A' || f);
        write("<br>true || 'A' 的结果是 ", t || 'A');
        write("<br>'A' || true 的结果是 ", 'A' || t);
        write("<br>'A' || 'B' 的结果是 ", 'A' || 'B');
        write("<br>1 || 1 的结果是 ", 1 || 1);
        write("<br>1 || 0 的结果是 ", 1 || 0);
        write("<br>true || 0 的结果是 ", true || 0);
        write("<br>true || 1 的结果是 ", true || 1);
        write("<br>true || '0' 的结果是 ", true || '0');
}

document.write('<p><b>////辑运算符"!"</b></p>');
with(document) {
        write("!true 的结果是 ", !true);
        write("<br>!false 的结果是 ", !false);
        write("<br>!'A' 的结果是 ", !'A');
        write("<br>!0 的结果是 ", !0);
        write("<br>!1 的结果是 ", !1);
        write("<br>!2 的结果是 ", !2);
        write("<br>!'0' 的结果是 ", !'0');
        write("<br>!'1' 的结果是 ", !'1');
        write("<br>!-1 的结果是 ", !-1);
}
</script>
</head>
<body>

</body>
</html>

三、JavaScript的转义字符

可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。对于某些特殊的字符，无法用键盘直接键入，这时就需要使用转义字符。还有一些字符（符号）用于特殊的用途，比如引号，如果要在字符串内包含引号，就需要使用转义字符。切记，每一个转义字符都是以反斜杠“\”开始的。

1、无法用键盘录入的转义字符

转义字符	字符	转义字符	字符
\b	退格符	\f	换页符
\n	换行符	\r	回车符
\t	制表符	\"	双引号
\'	单引号	\	反斜杠

2、特殊用途符号转义字符

字符	转义字符
点的转义：.	\u002E
美元符号的转义：$	\u0024
乘方符号的转义：^	\u005E
左大括号的转义：{	\u007B
左方括号的转义：[	\u005B
左圆括号的转义：(	\u0028
竖线的转义：\|	\u007C
右方括号转义：]	\u005D
右圆括号的转义：)	\u0029
星号的转义：*	\u002A
加号的转义：+	\u002B
问号的转义：?	\u003F
反斜杠的转义：\	\u005C

JavaScript代码如下：

<script type="text/javascript">
var oStr="我的名字叫\“张三\”，这段文字已经被双引号，按JS语法规则，";
oStr+="双引号中不能包括双引号。为了显示是姓名被双引号，在姓名双引号前加反斜杠。";
document.write(oStr);
</script>

将script标签内的JavaScript脚步代码复制、粘贴到银河统计JavaScript脚本测试工具，运行结果如下：

我的名字叫“张三”，这段文字已经被双引号，按JS语法规则，双引号中不能包括双引号。为了显示是姓名被双引号，在姓名双引号前加反斜杠。

注：这段文字为引号嵌套，但姓名的引号前使用了转移符号“\”，使得document.write(oStr)可以正确显示

HTML+CSS+JS是前端网页开发的基础，JS(JavaScript)在HTML网页中动态写入文本、数字和插入图表。掌握JavaScript编程可以轻松调用各类统计学库函数和在网页上进行统计数据处理或分析。

着B/S大行其道，Web端急需一个兼容绝大部分浏览器，直观，生动，可交互，可高度个性化定制的数据可视化图开发库。百度公司可能听到了众多程序猿的心声，速速开放、贡献出了echarts。echarts是纯JavaScript的图表库，可绘制折线图、柱状图、散点图、K线图、饼图、雷达图、地图、仪表盘、漏斗图等美丽、大气的图表。

尽管echarts好用，漂亮，但在生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项。有家企业实在看不下去了，就对 Vue2.0 和 echarts 进行了封装，形成了 v-charts 图表组件。

使用v-charts只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

45.1 v-charts安装

要想获得v-charts的支持，可通过npm进行安装。

npm i v-charts echarts -S

也可以通过cdn进行引入，其中style.min.css是可选项。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

详细用法，可参考官网https://v-charts.js.org/#/上的教程。为了方便，咱就使用cdn引入的方式。

45.2 数据分析

不用说你也应该知道，在templates/admin下创建的模板名称应该叫sale_sum.html，

如果真的不知道，往上仔细阅读admin.py中，SaleSumAdmin类的代码。如果知道，那就把templates/admin/change_list.html里的代码拷贝出来，粘贴到sale_sum.html中。

进行乾坤大挪移，移形换影后的代码如下。只知道引进了3个js文件并没多大意义，关键是要阅读并理解new Vue(…)里面的代码，因为那才是你想要的"财富"。

{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}?_=20180905"/>
    {#    <link rel="stylesheet" type="text/css" href="{% static "admin/simpleui/layui/css/layui.css" %}"/>#}
    {% if cl.formset %}
        <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>

    {% endif %}
    {% if cl.formset or action_form %}
        <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    {% endif %}
    {{ media.css }}
    {% if not actions_on_top and not actions_on_bottom %}
        <style>
            #changelist table thead th:first-child {
                width: inherit
            }
        </style>
    {% endif %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="breadcrumbs">
            <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
            › <a
                href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
            › {{ cl.opts.verbose_name_plural|capfirst }}
        </div>
    {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}
{% block content_title %}

{% endblock %}
{% block content %}
    <style>
        #content {
            position: relative;
        }

        .object-tools {
            position: absolute;
            top: 16px;
            right: 20px;
            height: 50px;
            z-index: 2;
        }

        .object-tools .import_link, .object-tools .export_link {
            color: white !important;
        }

    </style>
    {% block object-tools %}
        <ul class="object-tools">
            {% block object-tools-items %}
                {% if has_add_permission %}
                    {{ block.super }}
                {% endif %}
            {% endblock %}
        </ul>
    {% endblock %}

    <div id="content-main">

        {% if cl.formset.errors %}
            <p class="errornote">
                {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}
                    {% trans "Please correct the errors below." %}{% endif %}
            </p>
            {{ cl.formset.non_form_errors }}
        {% endif %}
        <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
            {% block search %}{% search_form cl %}{% endblock %}
            {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %}
        <div id="app" style="margin-top: 10px;margin-left: 5px">
           <ve-histogram :data="chartData" :mark-point="markPoint" :extend="chartExtend" :colors="colors">
           </ve-histogram>
        </div>

        </div>
    </div>
    <script>

    new Vue({
      el: '#app',
      data: function () {
        this.chartExtend = {
            title: {
                text: '{{ bar_title }}售业绩统计报表',
                subtext: '{{ subtext }}',
            },
        }
         this.markPoint = {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            }
        return  {
          colors: ['#c23531','#2f4554'],

          chartData: {

          columns: ['日期', '销售目标(万元)', '实际销售额(万元)'],
          rows: [
              {% if task %}
                { '日期': '1月', '销售目标(万元)': {{ task.Jan_task }} ,'实际销售额(万元)': {{ task.Jan_sale }}},
                { '日期': '2月', '销售目标(万元)': {{ task.Feb_task }} ,'实际销售额(万元)': {{ task.Feb_sale }}},
                { '日期': '3月', '销售目标(万元)': {{ task.Mar_task }} ,'实际销售额(万元)': {{ task.Mar_sale }}},
                { '日期': '4月', '销售目标(万元)': {{ task.Apr_task }} ,'实际销售额(万元)': {{ task.Apr_sale }}},
                { '日期': '5月', '销售目标(万元)': {{ task.May_task }} ,'实际销售额(万元)': {{ task.May_sale }}},
                { '日期': '6月', '销售目标(万元)': {{ task.Jun_task }} ,'实际销售额(万元)': {{ task.Jun_sale }}},
                { '日期': '7月', '销售目标(万元)': {{ task.Jul_task }} ,'实际销售额(万元)': {{ task.Jul_sale }}},
                { '日期': '8月', '销售目标(万元)': {{ task.Aug_task }} ,'实际销售额(万元)': {{ task.Aug_sale }}},
                { '日期': '9月', '销售目标(万元)': {{ task.Sep_task }} ,'实际销售额(万元)': {{ task.Sep_sale }}},
                { '日期': '10月', '销售目标(万元)': {{ task.Oct_task }} ,'实际销售额(万元)': {{ task.Oct_sale }}},
                { '日期': '11月', '销售目标(万元)': {{ task.Nov_task }} ,'实际销售额(万元)': {{ task.Nov_sale }}},
                { '日期': '12月', '销售目标(万元)': {{ task.Dec_task }} ,'实际销售额(万元)': {{ task.Dec_sale }}},
              {% endif %}
          ]
        },
         dataEmpty: true
        }
      }
    })
  </script>
    <script type="text/javascript">
        $(".object-tools").hide().find('li a').each(function () {
            _action.exts.push({
                name:$(this).text(),
                url:$(this).attr('href')
            })
        })

    </script>
{% endblock %}

万万没想到，在ModelAdmin里，竟然可以自定义过滤器，可以覆盖模板，还可以调整查询方法。更让人惊喜的，连模板里的代码都是通过拷贝完成的。

不试不知道，一试吓一跳，本以为不可能实现的功能，原来都是可以做得到的。所以说编程还是要多尝试，多动手。

好了，关于销售管理系统用Django实现的内容，总算开发完成了，下一步就说一下关于系统上线的内容。

Charts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

使用 JavaScript 实现开源的可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

具有丰富的可视化类型，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网址：https://echarts.baidu.com/

ECharts提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

多图联动

值域漫游

大规模散点图

子区域地图模式

代码示例

目标完成率

#数据分析指标完成情况
from pyecharts import Gauge
gauge=Gauge('目标完成率')
gauge.add('任务指标','完成率',80.2)
#gauge.render('gauge.html')
#图表输出
gauge.render()
gauge

水球图

#水球图
from pyecharts import Liquid
liquid=Liquid("水球图"
             )liquid.add("水球",[0.8])#liquid.render('liquid.html')#图表输出到路径下liquid.render()#图表直接输出liquid

箱线图

#箱线图from pyecharts import Boxplot
boxplot=Boxplot("箱线图")
x_axis=['销售额']
y_axis=[[169,126,248,263,265,273,248,241,326,334,479,347]]
yaxis=boxplot.prepare_data(y_axis)
boxplot.add("boxplot",x_axis,_yaxis)
boxplot.render()
#直接导出或者导出到文件内
boxplot.render(linebar.html)
boxplot

3D柱形图

#3D柱形图
from pyecharts import Bar3D
import json
bar3d=Bar3D("3D柱形图",width=1200,height=600)
f=open("bar3ds.json")
datas=json.load(f)
x_axis=datas['x_axis']
y_axis=datas['y_axis']
data=datas['data']
range_color=datas['range_color']
#visualmap热力图
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color)
#设置3D图的自动旋转
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True)
#设置3D图的自动旋转的速度
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True,grid3d_rotate_speed=180)
#图表输出
bar3d.render('3dbar.html')

本文来源于公众号：大话数据分析

更多实用的数据分析知识，请持续关注！

在线咨询

上一篇：「独立手机版」html5黑色企业网站源码企业通用单独手机网站
下一篇： JavaScript选择排序