JavaScript中的图标库Chart.js

最新推荐文章于 2024-06-19 17:06:22 发布

Nick_YangXiaoTong

最新推荐文章于 2024-06-19 17:06:22 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/Nick_YangXiaoTong/article/details/80836354

版权

值得一提的是在chartjs中方法的命名一般都是驼峰式

API文档： http://www.chartjs.org/docs/latest/

<!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>
    <!-- 定义存储图表的对象 -->
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <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>

Nick_YangXiaoTong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的图标库Chart.js

值得一提的是在chartjs中方法的命名一般都是驼峰式 API文档： http://www.chartjs.org/docs/latest/&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="
复制链接

扫一扫