chart.js 图表生成

参考链接：

https://blog.csdn.net/kimbing/article/details/53078934

https://blog.csdn.net/lishangr/article/details/50603197

引入js：

<!-- ChartJS 1.0.1 -->
<script src="/plugins/chartjs-old/Chart.min.js"></script>

建立图表容器：

<!-- BAR CHART -->
<div class="card card-success">
    <div class="card-header">
        <h3 class="card-title">销量</h3>
        <div class="card-tools">
            <span style="font-weight:400;font-size: 15px;color: white" onclick="productMonthCount()">本月</span>&nbsp;
            <span style="font-weight:400;font-size: 15px;color: white" onclick="productWeekCount()">本周</span>
        </div>
    </div>
    <div class="card-body">
        <div class="chart">
            <canvas id="productSellCount" style="height:230px"></canvas>
        </div>
    </div>
</div>


<!-- LINE CHART -->
<div class="card card-info">
    <div class="card-header">
        <h3 class="card-title">用户数</h3>
        <div class="card-tools">
            <span style="font-weight:400;font-size: 15px;color: white" onclick="customerMonthCount()">本月</span>&nbsp;
            <span style="font-weight:400;font-size: 15px;color: white" onclick="customerWeekCount()">本周</span>
        </div>
    </div>
    <div class="card-body">
        <div class="chart">
            <canvas id="customerCount" style="height:230px"></canvas>
        </div>
    </div>
</div>

 

初始化：

jQuery(function ($) {
    //画图-商品周销量数据柱状图
    productWeekCount();
    //画图-周用户数折线图
    customerWeekCount();

});

柱状图：

//柱状图参数设置
function barChartOptions() {
    var barChartOptions = {
        scaleOverlay : false,  // 网格线是否在数据线的上面
        scaleOverride : false, // 是否用硬编码重写y轴网格线
        scaleSteps : null, //y轴刻度的个数
        scaleStepWidth : null, //y轴每个刻度的宽度
        scaleStartValue : null,  //y轴的起始值
        scaleLineColor : "rgba(0,0,0,.1)",// x轴y轴的颜色
        scaleLineWidth : 1,// x轴y轴的线宽
        scaleShowLabels : true,// 是否显示y轴的标签
        scaleLabel : "<%=value%>",// 标签显示值
        scaleFontFamily : "'Arial'",// 标签的字体
        scaleFontSize : 12,// 标签字体的大小
        scaleFontStyle : "normal",// 标签字体的样式
        scaleFontColor : "#666",// 标签字体的颜色
        scaleShowGridLines : true,// 是否显示网格线
        scaleGridLineColor : "rgba(0,0,0,.05)",    // 网格线的颜色
        scaleGridLineWidth : 1, // 网格线的线宽
        scaleBeginAtZero: true, // y轴标记是否从0开始
        scaleShowHorizontalLines: true, // 是否显示横向线
        scaleShowVerticalLines: true, // 是否显示竖向线
        barShowStroke : true, // 是否显示线
        barStrokeWidth : 2,   // 线宽
        barValueSpacing : 20,// 柱状块与x值所形成的线之间的距离 5
        barDatasetSpacing : 1,// 在同一x值内的柱状块之间的间距
        animation : true,//是否有动画效果
        animationSteps : 60,//动画的步数
        animationEasing : "easeOutQuart",// 动画的效果
        showTooltips: false, // 是否显示提示
        // 图例
        legendTemplate : '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
        responsive              : true,  //Boolean - whether to make the chart responsive
        maintainAspectRatio     : true,
        // 动画完成后调用的函数(每个柱上显示对应的数据)
        onAnimationComplete: function () {
            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            this.datasets.forEach(function (dataset){
                dataset.bars.forEach(function (bar) {
                    ctx.fillText(bar.value, bar.x, bar.y);
                });
            });
        }

    };
    barChartOptions.datasetFill = false;

    return barChartOptions;
}


//商品周销量数据
function productWeekCount() {
    var chartData={};
    var labels=new Array();//x轴
    var datasets=new Array();//数据设置

    var dataset=new Array();//数据详细设置
    var data=new Array();//数据值
    $.ajax({
        url: pt.base + "home/weekSellCount.dd",
        type: "post",
        data: {},
        dataType: "json",
        async:false, // 同步请求
        success: function (result) {
            if (result != null && result != "" && result != undefined) {
                if (result.state == true) {
                    var datas = result.data;
                    labels=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
                    $.each(labels, function (i) {
                        data[i]=0;
                        $.each(datas, function (n) {
                            if(datas[n].day_time==labels[i]){
                                data[i]=datas[n].product_number;
                            }
                        });
                    });
                }
            }
        }
    });

    dataset.label='销量';
    dataset.fillColor='#00a65a';
    dataset.strokeColor='#00a65a';
    dataset.pointColor='#00a65a';
    dataset.pointStrokeColor='#c1c7d1';
    dataset.pointHighlightFill='#fff';
    dataset.pointHighlightStroke='rgba(220,220,220,1)';
    dataset.data=data;

    datasets.push(dataset);

    chartData.labels=labels;
    chartData.datasets=datasets;


    //画图-商品周销量数据柱状图
    var barChartCanvas= $('#productSellCount').get(0).getContext('2d');
    var barChart= new Chart(barChartCanvas)
    barChart.Bar(chartData, barChartOptions())
}

折线图：

//折线图参数设置
function lineChartOptions() {
    var lineChartOptions = {
        showScale               : true, //Boolean - If we should show the scale at all
        scaleStartValue :null,     // Y 轴的起始值
        scaleLineColor : "rgba(0,0,0,.1)",    // Y/X轴的颜色
        scaleLineWidth : 1,        // X,Y轴的宽度
        scaleShowLabels : true,    // 刻度是否显示标签, 即Y轴上是否显示文字
        scaleLabel : "<%=value%>", // Y轴上的刻度,即文字
        scaleFontFamily : "'Arial'",  // 字体
        scaleFontSize : 12,        // 文字大小
        scaleFontStyle : "normal",  // 文字样式
        scaleFontColor : "#666",    // 文字颜色
        scaleShowGridLines : true,   // 是否显示网格
        scaleGridLineColor : "rgba(0,0,0,.05)",   // 网格颜色
        scaleGridLineWidth : 2,      // 网格宽度
        scaleBeginAtZero: true, // y轴标记是否从0开始
        scaleShowHorizontalLines: true, // 是否显示横向线
        scaleShowVerticalLines: true, // 是否显示竖向线
        bezierCurve : false,         // 是否使用贝塞尔曲线? 即:线条是否弯曲
        pointDot : false,             // 是否显示点数
        pointDotRadius : 8,          // 圆点的大小
        pointDotStrokeWidth : 1,     // 圆点的笔触宽度, 即:圆点外层边框大小
        datasetStroke : true,        // 数据集行程
        datasetStrokeWidth : 2,      // 线条的宽度, 即:数据集
        datasetFill : false,         // 是否填充数据集
        animation : true,            // 是否执行动画
        animationSteps : 60,          // 动画的时间
        animationEasing : "easeOutQuart",    // 动画的特效
        onAnimationComplete : null,    // 动画完成时的执行函数
        //String - A legend template
        legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
        responsive              : true,  //Boolean - whether to make the chart responsive
        maintainAspectRatio     : true

    };
    lineChartOptions.datasetFill = false;

    return lineChartOptions;
}

//周客户量
function customerWeekCount() {
    var chartData={};
    var labels=new Array();//x轴
    var datasets=new Array();//数据设置

    var dataset=new Array();//数据详细设置
    var data=new Array();//数据值
    $.ajax({
        url: pt.base + "home/weekCustomerCount.dd",
        type: "post",
        data: {},
        dataType: "json",
        async:false, // 同步请求
        success: function (result) {
            if (result != null && result != "" && result != undefined) {
                if (result.state == true) {
                    var datas = result.data;
                    labels=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
                    $.each(labels, function (i) {
                        data[i]=0;
                        $.each(datas, function (n) {
                            if(datas[n].day_time==labels[i]){
                                data[i]=datas[n].counts;
                            }
                        });
                    });
                }
            }
        }
    });

    dataset.label='用户数';
    dataset.fillColor='transparent';   //背景色，常用transparent透明
    dataset.strokeColor='#6bc1ff'; //线条颜色，也可用"#ffffff"
    dataset.pointColor='rgba(220,220,220,1)';  //点的填充颜色
    dataset.pointStrokeColor='#c1c7d1'; //点的外边框颜色
    dataset.pointHighlightFill='#fff';
    dataset.pointHighlightStroke='rgba(220,220,220,1)';
    dataset.data=data; //y轴值

    datasets.push(dataset);

    chartData.labels=labels;
    chartData.datasets=datasets;


    //画图-周用户数折线图
    var lineChartCanvas= $('#customerCount').get(0).getContext('2d');
    var lineChart= new Chart(lineChartCanvas)
    lineChart.Line(chartData, lineChartOptions())
}

效果图：