Chart.js

最新推荐文章于 2024-05-14 02:27:52 发布

炉火纯青-旺

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量835

点赞数

分类专栏： Chart. 文章标签： Chart.js

本文链接：https://blog.csdn.net/qq_34870529/article/details/89480343

版权

Chart. 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
    <script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.bundle.min.js"></script>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</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 = 14;
        Chart.defaults.global.defaultFontColor = '#777';
        
        // 实例化Chart对象
        let chart = new Chart(myChart,{
            type:'bar',
            data:{
                labels:["北京","深圳","广州","上海","杭州","成都"],
                datasets:[{
                    label:"工作热度值",
                    data:[617594,432165,632145,325612,453215,236512],
                    // backgroundColor:"#cc6677",
                    backgroundColor:[
                        'rgba(255,99,132,0.6)',
                        'rgba(54,162,235,0.6)',
                        'rgba(255,206,86,0.6)',
                        'rgba(75,192,192,0.6)',
                        'rgba(153,102,255,0.6)',
                        'rgba(255,159,64,0.6)'
                    ],
                    // 添加边框
                    borderWidth:1,
                    borderColor:'#777',
                    hoverBorderWidth:3,
                    hoverBorderColor:'#000'
                }]
            },
            options:{
                title:{
                    display:true,
                    text:"中国各大城市工作热度值",
                    fontSize:25
                },
                legend:{
                    display:true,
                    position:'right',
                    labels:{
                        fontColor:'#000'
                    }
                },
                layout:{
                    padding:{
                        left:50,right:0,top:0,bottom:0
                    }
                }
            }
        })

    </script>
</body>
</html>

柱状图效果展示：

饼状图效果展示：

炉火纯青-旺

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Chart.js

<!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-...
复制链接

扫一扫