Django template 和 Chart.js 结合画图及两种随机颜色方法

1. 介绍

Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案；Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法；Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。

2.快速上手

起步
引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

创建图表

为了创建图表，我们要实例化一个Chart对象。为了完成前面的步骤，首先需要需要传入一个绘制图表的2d context。以下是案例。

<canvas id="myChart" width="400" height="400"></canvas>

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

我们还可以用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点，然后在这个DOM节点上调用 getContext(“2d”) 方法。

//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后，我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中，我将展示如何与Django template 结合画图。

2.1 基于Javascript 的方法

<script type="text/javascript">
    var cage_list = new Array;
    var mask_data = new Array;
    var unmask_data = new Array;
    {% for cage in cage_list %}
        cage_list.push('{{ cage.cagename }}');
        mask_data.push('{{ each_cage_mask_dcit|get_item:cage}}');
        unmask_data.push('{{ each_cage_unmask_dcit|get_item:cage}}');
    {% endfor %}

    var barChartData = {
    labels :cage_list,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : mask_data
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : unmask_data
        }
    ]
}
window.onload = function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, 
        {responsive : true,
        scaleShowLabels : true,});
}

其中 get_item是一个django template custom tag 如下：

from django.template.defaulttags import register
@register.filter
def get_item(dictionary, key):
    return dictionary.get(key)

2.2 基于jQuery画图

{% for cage in cage_list %}
                cage_list.push('{{ cage.cagename }}');
                mask_data.push('{{ each_cage_mask_dcit|get_item:cage}}');
                unmask_data.push('{{ each_cage_unmask_dcit|get_item:cage}}');
         {% endfor %}

        var data = {
                    labels : cage_list,
                    datasets : [
                        {
                            fillColor : "rgba(220,220,220,0.5)",
                            strokeColor : "rgba(220,220,220,1)",
                            data : mask_data
                        },
                        {
                            fillColor : "rgba(151,187,205,0.5)",
                            strokeColor : "rgba(151,187,205,1)",
                            data : unmask_data
                        }
                    ]
                }
        $(document).ready(function(){
            var ctx = $("#myChart").get(0).getContext("2d");
            new Chart(ctx).Bar(data,{
                responsive : true
            });
        })

3 两种随机颜色javascript方法

'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) +', 0.4'+ ')',
'#'+Math.random().toString(16).substr(-6),