Hicharts弄个样例

 $(function () {
        $(‘#container‘).highcharts({
            title: {
                text: ‘每日验证趋图‘,
                x: -20 //center
            },
            subtitle: {
                text: ‘Source: Prism‘,
                x: -20
            },
            xAxis: {
                categories: {{ categories | safe }}
            },
            yAxis: {
                title: {
                    text: ‘验证次数‘
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: ‘#808080‘
                }]
            },
            tooltip: {
                valueSuffix: ‘人次‘
            },
            legend: {
                layout: ‘vertical‘,
                align: ‘right‘,
                verticalAlign: ‘middle‘,
                borderWidth: 0
            },
            series: [{
                name: ‘组件发布‘,
                data: {{ data }}
            }]
        });
    });

    var chart2;
    $(function() {
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: ‘chart_column‘, //图表放置的容器，关联DIV#id
                zoomType: ‘xy‘   //X、Y轴均可放大
                //因为是柱状图和曲线图共存在一个图表中，所以默认图表类型不在这里设置。
            },
            title: {
                text: ‘每日验证趋图‘ //图表标题
            },
            subtitle: {
                text: ‘Source: Prism‘   //图表副标题
            },
            credits: {
                enabled: false   //不显示LOGO
            },
            xAxis: [{ //X轴标签
                categories: {{ categories | safe }},
                labels: {
                    rotation: -45,  //逆时针旋转45°，标签名称太长。
                    align: ‘right‘  //设置右对齐
                }
            }],
            yAxis: [{ //设置Y轴-第一个（增幅）
                labels: {
                    formatter: function() { //格式化标签名称
                        return this.value + ‘%‘;
                    },
                    style: {
                        color: ‘#89A54E‘ //设置标签颜色
                    }
                },
                title: {text: ‘‘}, //Y轴标题设为空
                opposite: true  //显示在Y轴右侧，通常为false时，左边显示Y轴，下边显示X轴

            },
            { //设置Y轴-第二个（金额）
                gridLineWidth: 0,  //设置网格宽度为0，因为第一个Y轴默认了网格宽度为1
                title: {text: ‘‘},//Y轴标题设为空
                labels: {
                    formatter: function() {//格式化标签名称
                        return this.value + ‘ 人次‘;
                    },
                    style: {
                        color: ‘#4572A7‘ //设置标签颜色
                    }
                }

            }],
            tooltip: { //鼠标滑向数据区显示的提示框
                formatter: function() {  //格式化提示框信息
                    var unit = {
                        ‘频率‘: ‘次‘,
                    } [this.series.name];
                    return ‘‘ + this.x + ‘: ‘ + this.y + ‘ ‘ + unit;
                }
            },
            legend: { //设置图例
                layout: ‘vertical‘, //水平排列图例
                shadow: true,  //设置阴影
            },
            series: [{  //数据列
                name: ‘频率‘,
                color: ‘#4572A7‘,
                type: ‘column‘, //类型：纵向柱状图
                yAxis: 1, //数据列关联到Y轴，默认是0，设置为1表示关联上述第二个Y轴即金额
                data: {{ data }} //金额数据
            },
            ]
        });
    });