初识ChartJS(前端第三方库)demo

最新推荐文章于 2025-03-01 11:21:41 发布

hr226

最新推荐文章于 2025-03-01 11:21:41 发布

阅读量587

点赞数

分类专栏： demo 文章标签：初识ChartJS(前端第三方库)demo

本文链接：https://blog.youkuaiyun.com/hr226/article/details/100765842

版权

demo 专栏收录该内容

21 篇文章

订阅专栏

本文档将引导您初步了解如何使用ChartJS这个流行的前端图表库。通过一个简单的index.html示例，展示如何配置和绘制基本图表，帮助开发者快速入门数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/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对象
        let chart = new Chart(myChart, {
            // type: 'bar',
            type: 'pie',
            data: {
                labels: ["北京", "深圳", "广州", "上海", "杭州", "成都"],
                datasets: [{
                    label: "工作热度值",
                    data: [617594, 181045, 153060, 106519, 105162, 95072],
                    // backgroundColor: "#cc6677",
                    backgroundColor: [
                        'rgba(255,99,132,0.6)',
                        'rgba(54,162,235,0.6)',
                        'rgba(255,206,86,0.6)',
                        'rgba(5,200,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,
                        bottom: 0,
                        top: 0,
                    }
                },
                tooltips: {
                    enabled: true,
                }
            }
        })
    </script>
</body>

</html>