当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript中的图标库Chart.js代码实例

JavaScript中的图标库Chart.js代码实例

2018年10月05日  | 移动技术网IT编程  | 我要评论
值得一提的是 在chartjs中 方法的命名一般都是驼峰式
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>chart.js</title>
    <!-- 引入chartjs以及bootstrapcdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.0/chart.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <!-- 定义存储图表的对象 -->
    <p class="container">
        <canvas id="mychart"></canvas>
    </p>

    <script>
        // 返回对象上绘图的环境
        let mychart = document.getelementbyid("mychart").getcontext("2d");
        // 配置全局默认信息 
        chart.defaults.global.defaultfontfamily = 'lato';
        chart.defaults.global.defaultfontsize = 18;
        chart.defaults.global.defaultfontcolor = '#777';

        // 实例化chart对象 chart(存到哪里,配置)
        let chart = new chart(mychart,{
            type : 'bar',//图形类型
            data : {//图形数据
                labels : ["北京","深圳","广州","上海","杭州","成都"],//各个分类
                datasets : [{
                    label : "工作热度值",//功能描述
                    data : [617594,124532,456786,765432,568934,923456],//每个分类对应的值
                    backgroundcolor : [//图形背景颜色
                        `rgba(255,99,132,.6)`,
                        "rgba(54,162,235,.6)",
                        "rgba(255,206,86,.6)",
                        "rgba(75,102,192,.6)",
                        "rgba(173,102,255,.6)",
                        "rgba(255,159,64,.6)",
                    ],
                    // 添加边框
                    borderwidth : 1,
                    bordercolor : '#777',
                    hoverborderwidth : 3,
                    hoverbordercolor : '#eee'
                }]
            },
            options : {//配置样式
                title : {//标题
                    display : true,
                    text : "在中国",
                    fontsize : 25,
                },
                legend : {//功能描述的样式设置
                    display :true,
                    position : 'right',
                    labels : {
                        fontcolor : "#000",
                    }
                },
                layout : {//位置调整
                    padding : {
                        left : 50,
                        right : 0,
                        bottom : 0,
                        top : 0
                    }
                },
                tooltips : {//hover 是否展示信息
                    enabled :true
                }
            }
        })
    </script>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网