Django学习10 -- 图形展示

源数据可以称之为raw data，源数据展现给用户的信息是全面的，却是无序的、掺杂着噪点的数据集合。

表格，是数据经过分析，按不同属性、不同维度转换后的展现，可以让数据按用户要求格式化的展现，更易理解。

图形，是表格数据的进一步展现，以图形化的形式展示不同数据间的关系，认图比看数字更易理解和接受。

 

图形展示与Django没有特别的关系，与HTML和第三方图形展示控件关系更密切一些

1.图形控件的选择

• django-chart-tools -- https://code.activestate.com/pypm/django-chart-tools/

django-chart-tools is a simple app for creating charts in django templates using Google Chart API

 -- 对于无法访问Google API的网络，一些网络访问限制会让chart无法正常显示，原因不明；试用后放弃。

# django-chart-tools
# step1: pip install django-chart-tools
# step2: add 'chart_tools' to your INSTALLED_APPS
# step3: show chart

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chart_tools',                    # step2: add 'chart_tools' to your INSTALLED_APPS
]

# step3: show chart  

            {% load chart_tags %}
            {% chart %}
                chxr=0,0,160
                chxt=y
                chbh=b
                chs=400x250     #-- size
                x
                
                cht=bvs         #-- chart type
                chco=000000     #-- chart color
                chds=0,100
                chd=s:{{ char_project }}  #-- char data
                chtt= Project +    +    #-- char title
            {% endchart %}

• chartjs
• echart  

2.echart的使用

• https://echarts.baidu.com/ -- 官网，关注教程 和 配置项手册即可生成所需chart，相对简单
• 下载echarts文件包，按所需选取 js 文件
• 加入引用

# 在HTML页面加入js引用 
# 根据django常用目录结构分配，JS一般位于 static/js目标
# 使用echarts的 echarts.min.js 文件

# 以下为样例说明
    
    

    

• 特别说明

      * 注意数据格式：在django veiw与前台HTML传递数据时，注意data:所需格式 -- 序列，数值，字符串等
         前台页面使用 {{ view_parameter }}传递view中的render值

       * tooltips { formatter: 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
          饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

       * safe filter，escaped（转义）
          -- Django Documentation, API reference中的Templates中对参数有着详细的说明，可以深入了解和学习

To disable auto-escaping for an individual variable, use the safe filter:
This will be escaped: {{ data }}
This will not be escaped: {{ data|safe }}