Char.Js 学习使用

Posted 2020-10-12 浩叔

<script src="../js/Chart.js"></script>
    <div class="aui-col-xs-6" style="border:none;"><canvas id="first" width="620" height="240" style="float:left;"></canvas></div>
    <script>
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    data: [65, 59, 90, 81, 56, 55, 1000]
                },
                {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [28, 48, 40, 19, 96, 27, 100]
                }
            ]
        }

        function myChart() {
            // $(‘#a_canvas‘).css(‘width‘, $(window).width()-30);
            //window.addEventListener("load", function () {

            var options = [‘现金‘, ‘红包‘, ‘碳值‘, ‘碳宝‘, ‘钻石‘, ‘铢‘];

            // 获取上下文
            var context = document.getElementById("first").getContext("2d");
            var context1 = document.getElementById("seccend").getContext("2d");
            var sthreed3 = document.getElementById("sthreed").getContext("2d");
            //context.font = "20px Arial";
            new Chart(context).Line(data, options);
        }
        myChart();

    </script>

 

this.Line = function(data,options){
    
        chart.Line.defaults = {
            //网格线显示在数据的上方
            scaleOverlay: false,
            //硬编码重写y轴网格线
            scaleOverride: false,
            //y轴刻度的个数
            scaleSteps: null,
            //y轴每个刻度的宽度
            scaleStepWidth: null,
            //y轴的起始值
            scaleStartValue: null,
            //x轴和y轴的颜色
            scaleLineColor: "rgba(0,0,0,0.1)",
            //x轴和y轴的线的宽度
            scaleLineWidth: 1,
            //是否显示y轴的标签
            scaleShowLabels: true,
            //标签显示值
            scaleLabel: "<%=value%>",
            //x轴和y轴标签的字体
            scaleFontFamily: "‘Arial‘",
            //标签字体的大小
            scaleFontSize: 12,
            //标签字体的样式
            scaleFontStyle: "normal",
            //标签字体的颜色
            scaleFontColor: "#666",
            //是否显示网格线
            scaleShowGridLines: true,
            //网格线的颜色
            scaleGridLineColor: "rgba(0,0,0,.08)",
            //网格线的线宽
            scaleGridLineWidth: 1,
            //是否是曲线
            bezierCurve: true,
            //是否显示点
            pointDot: true,
            //点的大小
            pointDotRadius: 4,
            //点的边框的大小
            pointDotStrokeWidth: 2,
            //是否显示数据集的笔画
            datasetStroke: false,
            //数据线的线宽度
            datasetStrokeWidth: 2,
            //图标上的阴影部分
            datasetFill: true,
            //是否使用动画效果
            animation: true,
            //动画的步骤数(帧)
            animationSteps: 60,
            //动画效果
            animationEasing: "easeOutQuart",
            //动画完成时的回调
            onAnimationComplete: null
        };