R 语言有非常多的绘图和数据可视化的包，比如 graphics、lattice、ggplot2 等。这是 R 语言系列的第 9 篇文章，我们会介绍 R 中用来绘图的各种函数。

本文使用的 R 是 4.1.2 版本，运行环境为 Parabola GNU/Linux-libre (x86-64)。

$ R --version

R version 4.1.2 (2021-11-01) -- "Bird Hippie"
Copyright (C) 2021 The R Foundation for Statistical Computing
Platform: x86_64-pc-linux-gnu (64-bit)

R 是自由软件，没有任何担保责任。只要遵守 GNU 通用公共许可证的版本 2 或者版本 3，你就可以对它进行（修改和）再分发。详情见 https://www.gnu.org/licenses/。

折线图

我们以印度全境消费者物价指数（CPI -- 乡村/城市）数据集为研究对象，它可以从 https://data.gov.in/catalog/all-india-consumer-price-index-ruralurban-0 下载。选择“截止到 2021 年 11 月” 的版本，用 read.csv 函数读取下载好的文件，如下所示：

> cpi <- read.csv(file="CPI.csv", sep=",")

> head(cpi)
Sector Year Name Andhra.Pradesh Arunachal.Pradesh Assam Bihar
1 Rural 2011 January 104 NA 104 NA
2 Urban 2011 January 103 NA 103 NA
3 Rural+Urban 2011 January 103 NA 104 NA
4 Rural 2011 February 107 NA 105 NA
5 Urban 2011 February 106 NA 106 NA
6 Rural+Urban 2011 February 105 NA 105 NA
Chattisgarh Delhi Goa Gujarat Haryana Himachal.Pradesh Jharkhand Karnataka
1 105 NA 103 104 104 104 105 104
2 104 NA 103 104 104 103 104 104
3 104 NA 103 104 104 103 105 104
4 107 NA 105 106 106 105 107 106
5 106 NA 105 107 107 105 107 108
6 105 NA 104 105 106 104 106 106
...

以 Punjab 州为例，对每年各月份的 CPI 值求和，然后用 plot 函数画一张折线图：

> punjab <- aggregate(x=cpi$Punjab, by=list(cpi$Year), FUN=sum)

> head(punjab)
Group.1 x
1 2011 3881.76
2 2012 4183.30
3 2013 4368.40
4 2014 4455.50
5 2015 4584.30
6 2016 4715.80

> plot(punjab$Group.1, punjab$x, type="l", main="Punjab Consumer Price Index upto November 2021", xlab="Year", ylab="Consumer Price Index")

plot 函数可以传入如下参数：

结果如图 1。

自相关图

自相关图能在时序分析中展示一个变量是否具有自相关性，可以用 R 中的 acf 函数绘制。acf 函数可以设置三种自相关类型：correlation、covariance 或 partial。图 2 是 Punjab 州 CPI 值的自相关图，x 表示 CPI。

acf(punjab$x,main='x')

acf 函数可以传入以下参数：

柱状图

R 中画柱状图的函数是 barplot。下面的代码用来画 Punjab 州 CPI 的柱状图，如图3：

> barplot(punjab$x, main="Punjab Consumer Price Index", sub="Upto November 2021", xlab="Year", ylab="Consumer Price Index", col="navy")

barplot 函数的使用方法非常灵活，可以传入以下参数：

用 help 命令可以查看 barplot 函数的详细信息：

> help(barplot)

barplot                package:graphics                R Documentation

Bar Plots

Description:

     Creates a bar plot with vertical or horizontal bars.

Usage:

     barplot(height, ...)

     ## Default S3 method:
     barplot(height, width = 1, space = NULL,
             names.arg = NULL, legend.text = NULL, beside = FALSE,
             horiz = FALSE, density = NULL, angle = 45,
             col = NULL, border = par("fg"),
             main = NULL, sub = NULL, xlab = NULL, ylab = NULL,
             xlim = NULL, ylim = NULL, xpd = TRUE, log = "",
             axes = TRUE, axisnames = TRUE,
             cex.axis = par("cex.axis"), cex.names = par("cex.axis"),
             inside = TRUE, plot = TRUE, axis.lty = 0, offset = 0,
             add = FALSE, ann = !add && par("ann"), args.legend = NULL, ...)

     ## S3 method for class 'formula'
     barplot(formula, data, subset, na.action,
             horiz = FALSE, xlab = NULL, ylab = NULL, ...)

饼图

绘制饼图时要多加注意，因为饼图不一定能展示出各扇形间的区别。（LCTT 译注：根据统计学家和一些心理学家的调查结果，这种以比例展示数据的统计图形 实际上是很糟糕的可视化方式，因此，R 关于饼图的帮助文件中清楚地说明了并不推荐使用饼图，而是使用条形图或点图作为替代。） 用 subset 函数获得 Gujarat 州在 2021 年 1 月 Rural、Urban、Rurual+Urban 的 CPI 值：

> jan2021 <- subset(cpi, Name=="January" & Year=="2021")

> jan2021$Gujarat
[1] 153.9 151.2 149.1

> names <- c('Rural', 'Urban', 'Rural+Urban')

使用 pie 函数为 Gujarat 州的 CPI 值生成饼图，如下所示：

> pie(jan2021$Gujarat, names, main="Gujarat CPI Rural and Urban Pie Chart")

pie 函数可以传入以下参数：

箱线图

（LCTT 译注：箱线图主要是 从四分位数的角度出发 描述数据的分布，它通过最大值（Q4）、上四分位数（Q3）、中位数（Q2）、下四分位数（Q1） 和最小值（Q0）五处位置来获取一维数据的分布概况。我们知道，这五处位置之间依次包含了四段数据，每段中数据量均为总数据量的 1/4。通过每一段数据占据的长度，我们可以大致推断出数据的集中或离散趋势。长度越短，说明数据在该区间上越密集，反之则稀疏。）

箱线图能够用“ 须线 whisker ” 展示一个变量的 四分位距 Interquartile Range （简称 IQR=Q3-Q1）。用上下四分位数分别加/减内四分位距，再乘以一个人为设定的倍数 range（见下面的参数列表），得到 range * c(Q1-IQR, Q3+IQR)，超过这个范围的数据点就被视作离群点，在图中直接以点的形式表示出来。

boxplot 函数可以传入以下参数：

用 boxplot 函数绘制部分州的箱线图：

> names <- c ('Andaman and Nicobar', 'Lakshadweep', 'Delhi', 'Goa', 'Gujarat', 'Bihar')
> boxplot(cpi$Andaman.and.Nicobar, cpi$Lakshadweep, cpi$Delhi, cpi$Goa, cpi$Gujarat, cpi$Bihar, names=names)

QQ 图

QQ 图 Quantile-Quantile plot 可以用来对比两个数据集，也可以用来检查数据是否服从某种理论分布。qqnorm 函数能绘制正态分布 QQ 图，可以检验数据是否服从正态分布，用下面的代码绘制 Punjab 州 CPI 数据的 QQ 图：

> qqnorm(punjab$x)

qqline 函数可以向正态分布 QQ 图上添加理论分布曲线，它可以传入以下参数：

等高图

等高图可以描述三维数据，在 R 中对应的函数是 contour，这个函数也可以用来向已有的图表添加等高线。等高图常与其他图表一起使用。我们用 contour 对 R 中的 volcano 数据集（奥克兰的火山地形信息）绘制等高图，代码如下：

> contour(volcano)

contour 函数的常用参数如下：

等高线之间的区域可以用颜色填充，每种颜色表示一个高度范围，如下所示：

> filled.contour(volcano, asp = 1)
# asp 为图形纵横比，即 y 轴上的 1 单位长度和 x 轴上 1 单位长度的比率

填充结果见图 8。

掌握上述内容后，你可以尝试 R 语言 graphics 包中的其他函数和图表（LCTT 译注：用 help(package=graphics) 可以查看 graphics 包提供的函数列表）。

via: https://www.opensourceforu.com/2022/05/plotting-data-in-r-graphs/

作者：Shakthi Kannan 选题：lkxed 译者：tanloong 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

图表及其它可视化方式让传递数据的信息变得更简单。

对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理解的和交互的方式进行可视化，还能够优化你的网站设计。

本文会带你学习最好的 3 个开源 JavaScript 图表库。

1、 Chart.js

Chart.js 是一个开源的 JavaScript 库，你可以在自己的应用中用它创建生动美丽和交互式的图表。使用它需要遵循 MIT 协议。

使用 Chart.js，你可以创建各种各样令人印象深刻的图表和图形，包括条形图、折线图、范围图、线性标度和散点图。它可以响应各种设备，使用 HTML5 Canvas 元素进行绘制。

示例代码如下，它使用该库绘制了一个条形图。本例中我们使用 Chart.js 的内容分发网络（CDN）来包含这个库。注意这里使用的数据仅用于展示。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
   
    <canvas id="bar-chart" width=300" height="150"></canvas>
  
    <script>
     
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
      datasets: [
        {
          label: "Number of developers (millions)",
          backgroundColor: ["red", "blue","yellow","green","pink"],
          data: [7,4,6,9,3]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Number of Developers in Every Continent'
      },

      scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }

    }

});
    </script>
   
</body>
</html>

如你所见，通过设置 type 和 bar 来构造条形图。你可以把条形体的方向改成其他类型 —— 比如把 type 设置成 horizontalBar。

在 backgroundColor 数组参数中提供颜色类型，就可以设置条形图的颜色。

颜色被分配给关联数组中相同索引的标签和数据。例如，第二个标签 “Latin American”，颜色会是 “蓝色（blue）”（第二个颜色），数值是 4（data 中的第二个数字）。

代码的执行结果如下。

2、 Chartist.js

Chartist.js 是一个简单的 JavaScript 动画库，你能够自制美丽的响应式图表，或者进行其他创作。使用它需要遵循 WTFPL 或者 MIT 协议。

这个库是由一些对现有图表工具不满的开发者进行开发的，它可以为设计师或程序员提供美妙的功能。

在项目中包含 Chartist.js 库后，你可以使用它们来创建各式各样的图表，包括动画，条形图和折线图。它使用 SVG 来动态渲染图表。

这里是使用该库绘制一个饼图的例子。

<!DOCTYPE html>
<html>
<head>
   
    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
   
    <style>
        .ct-series-a .ct-slice-pie {
            fill: hsl(100, 20%, 50%); /* filling pie slices */
            stroke: white; /*giving pie slices outline */          
            stroke-width: 5px;  /* outline width */
          }

          .ct-series-b .ct-slice-pie {
            fill: hsl(10, 40%, 60%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-c .ct-slice-pie {
            fill: hsl(120, 30%, 80%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-d .ct-slice-pie {
            fill: hsl(90, 70%, 30%);
            stroke: white;
            stroke-width: 5px;
          }
          .ct-series-e .ct-slice-pie {
            fill: hsl(60, 140%, 20%);
            stroke: white;
            stroke-width: 5px;
          }

    </style>
     </head>

<body>

    <div class="ct-chart ct-golden-section"></div>

    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <script>
       
      var data = {
            series: [45, 35, 20]
            };

      var sum = function(a, b) { return a + b };

      new Chartist.Pie('.ct-chart', data, {
        labelInterpolationFnc: function(value) {
          return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
              });
     </script>
</body>
</html>

使用 Chartist JavaScript 库，你可以使用各种预先构建好的 CSS 样式，而不是在项目中指定各种与样式相关的部分。你可以使用这些样式来设置已创建的图表的外观。

比如，预创建的 CSS 类 .ct-chart 是用来构建饼状图的容器。还有 .ct-golden-section 类可用于获取纵横比，它基于响应式设计进行缩放，帮你解决了计算固定尺寸的麻烦。Chartist 还提供了其它类别的比例容器，你可以在自己的项目中使用它们。

为了给各个扇形设置样式，可以使用默认的 .ct-serials-a 类。字母 a 是根据系列的数量变化的（a、b、c，等等），因此它与每个要设置样式的扇形相对应。

Chartist.Pie 方法用来创建一个饼状图。要创建另一种类型的图表，比如折线图，请使用 Chartist.Line。

代码的执行结果如下。

3、 D3.js

D3.js 是另一个好用的开源 JavaScript 图表库。使用它需要遵循 BSD 许可证。D3 的主要用途是，根据提供的数据，处理和添加文档的交互功能，。

借助这个 3D 动画库，你可以通过 HTML5、SVG 和 CSS 来可视化你的数据，并且让你的网站变得更精美。更重要的是，使用 D3，你可以把数据绑定到文档对象模型（DOM）上，然后使用基于数据的函数改变文档。

示例代码如下，它使用该库绘制了一个简单的条形图。

<!DOCTYPE html>
<html>
<head>
     
    <style>
    .chart div {
      font: 15px sans-serif;
      background-color: lightblue;
      text-align: right;
      padding:5px;
      margin:5px;
      color: white;
      font-weight: bold;
    }
       
    </style>
     </head>

<body>

    <div class="chart"></div>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

    <script>

      var data = [342,222,169,259,173];

      d3.select(".chart")
        .selectAll("div")
        .data(data)
          .enter()
          .append("div")
          .style("width", function(d){ return d + "px"; })
          .text(function(d) { return d; });
       
 
    </script>
</body>
</html>

使用 D3 库的主要概念是应用 CSS 样式选择器来定位 DOM 节点，然后对其执行操作，就像其它的 DOM 框架，比如 JQuery。

将数据绑定到文档上后，.enter() 函数会被调用，为即将到来的数据构建新的节点。所有在 .enter() 之后调用的方法会为数据中的每一个项目调用一次。

代码的执行结果如下。

总结

JavaScript 图表库提供了强大的工具，你可以将自己的网络资源进行数据可视化。通过这三个开源库，你可以把自己的网站变得更好看，更容易使用。

你知道其它强大的用于创造 JavaScript 动画效果的前端库吗？请在下方的评论区留言分享。

via: https://opensource.com/article/18/9/open-source-javascript-chart-libraries

作者：Dr.Michael J.Garbade 选题：lujun9972 译者：BriFuture 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出