一直对数据可视化比较感兴趣，觉得把数据做成很炫酷的视觉表现形式有些不可思议，但是苦于一直没有时间去做更深入的了解。所以，最近准备开始玩玩数据可视化。数据可视化是一个广泛的概念，只有具体到将数据可视化为某一种形式才有意义。我们日常的各种图表，比如折线图、柱状图、散点图、思维导图等就是最为普遍的数据可视化形式，这样的数据表现形式让我们更能直观的得到数据中的重要信息，由此可见，数据可视化就是为了将数据展示成易读易懂的数据形式，从而很快的从数据中得到我们想要的信息，然后根据得到的信息进一步作出决策。所以，数据可视化是必要的、重要的数据视觉化形式！数据可视化的方式有很多，比如借助一些工具来表现（如Excel、PPT等），但是不够灵活。当我们需要定制的、有个性的数据表现形式时，我们就可以借助编程的方式来实现，比如最常用的javascipt、WebGL等。我准备从最基本的数据到图表的可视化来展开进一步的学习。

😃需要的知识技能：

  • HTML基础
  • Javascript基础

🔆 学过js的同学都知道js中有很多图表的库：比如chart、echarts、Chartist、C3、Flot等，对比学习过这些库之后就会发现，echarts功能是极其强大的，定制性很高。这一期我们先从比较简单、轻量的chart.js库学起。

🌩chart官网：https://www.chartjs.org/ 中文官网：https://chartjs.bootcss.com/

进入官网后，映入眼帘的是一个很舒服的UI界面，我个人一直很喜欢这种UI设计风格，简洁中透露着丝滑。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d30IkolH-1600519623283)(https://hexo-blog-1300320201.cos.ap-shanghai.myqcloud.com/hexo-imgimage-20200821184128408.png)]

接下来，我们一起实现几种最常见的图表：

〰️ 折线图（line）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K8OMGvwk-1600519623289)(https://hexo-blog-1300320201.cos.ap-shanghai.myqcloud.com/hexo-img下载.png)]

可以看到以上折线图简洁好看，代码实现也很简单：

  • 新建一个html文件，引入chart.css以及chart.js，这里通过CDN的方式引入，如果离线执行该代码的话需要引入本地下载好的chart.css以及chart.js

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
</body>
</html>

  • 创建一个canvas画布，图表都是画在canvas画布上的

    <canvas id="canvas" width="300" height="100"></canvas> /*绘制canvas画布*/

  • 编写chart的基本代码结构

    <script>
    var ctx = document.getElementById('canvas').getContext('2d'); /*得到canvas的2d对象*/
    var myChart = new Chart(ctx, {
        type: 'line', /*图表类型*/
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], /*x轴的值*/
            datasets: [{
                label: 'line', /*最上面的图标名称，点击该图标可以隐藏或显示折线图*/
                fill: false, /*是否填充折线图，设置为true时将把折线图中线以下的空间进行填充*/
                data: [12, 19, 3, 5, 2, 3], /*折线图的数据，y轴将根据该数据自动绘制*/
                backgroundColor: 'rgb(153,102,255)', /*图线的背景颜色，颜色格式可以为rgb格式或者十六进制格式*/
                borderColor: 'rgb(75,192,192)', /*图线的边框颜色，颜色格式可以为rgb格式或者十六进制格式*/
                borderWidth: 5, /*每一条线的宽度*/
                pointHoverBorderWidth: 25, //鼠标悬浮时点的边框宽度
                //borderDash: [5,10], //破折号的长度和间距
                borderCapStyle: 'butt', //线帽样式
                borderJoinStyle: 'bevel', //线连接风格
                lineTension: 0, //贝塞尔曲线张力。设置为 0 绘制直线。
                pointBackgroundColor: [
                    '#FFC000', '#92D050', '#00B050', '#00B0F0', '#7030A0', '#FFB27D'
                ], /*悬浮在数据点上时显示的颜色*/
            }],
        }
    });
</script>

  • 将以上代码组合起来并执行就可以得到刚开始的折线图了！

⭕️饼图（pie ）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GnOH6dFM-1600519623292)(https://hexo-blog-1300320201.cos.ap-shanghai.myqcloud.com/hexo-imgpie.png)]

  • 只要改变chart的基本代码结构即可得到饼图

    <script>
    var ctx = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie', /*图表类型为饼图*/
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], /*每一快饼图的名称*/
            datasets: [{
                label: 'pie', /*最上面图标名称，点击该图标可以隐藏或显示饼图*/
                data: [12, 19, 3, 5, 2, 3], /*饼图中每一块数据大小*/
                backgroundColor: [
                    '#FFC000',
                    '#92D050',
                    '#00B050',
                    '#00B0F0',
                    '#7030A0',
                    '#FFB27D'
                ] /*组成饼图中每一块的背景颜色，颜色格式可以为rgb格式或者十六进制格式*/
            }],
        }
    });
</script>

🔵气泡图（bubble）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEWjPcZH-1600519623296)(https://hexo-blog-1300320201.cos.ap-shanghai.myqcloud.com/hexo-imgbubble.png)]

  • 气泡图的数据组成有所不同

    <script>
    var ctx = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bubble',
        data: {
            datasets: [{ /*第一组气泡图*/
                label: 'first',
                data: [
                    {'x':10, 'y': 5, 'r': 15}, /*x：x轴距离，y：y轴距离，r：气泡半径(单位：px)*/
                    {'x':5, 'y': 5, 'r': 10},
                    {'x':9, 'y': 15, 'r': 20},
                    {'x':15, 'y': 25, 'r': 9},
                    {'x':25, 'y': 10, 'r': 16}
                ],
                backgroundColor: 'rgba(199,133,200)',
            },{ /*第二组气泡图*/
                label: 'second',
                data: [
                    {'x':12, 'y': 6, 'r': 15},
                    {'x':10, 'y': 5, 'r': 10},
                    {'x':25, 'y': 10, 'r': 20},
                    {'x':5, 'y': 15, 'r': 9},
                    {'x':9, 'y': 20, 'r': 16}
                ],
                backgroundColor: 'rgba(146,208,80)',
            }]
        }
    });
</script>

这一期就先写到这里！以上所有代码已提交到gitee：https://gitee.com/bfanfanfan/common/tree/master/wechat

欢迎关注个人公众号：
在这里插入图片描述

# 数据可视化 # echarts
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区