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選擇排序