Chart.js入门：饼图，甜甜圈图和气泡图

最新推荐文章于 2024-08-24 21:49:50 发布

cunjie3951

最新推荐文章于 2024-08-24 21:49:50 发布

阅读量1.7k

点赞数

文章标签： python java 可视化 javascript 大数据 ViewUI

到目前为止，您已经在Chart.js中了解了四种不同的图表类型。本系列的第二篇教程介绍折线图和条形图。第三个教程讨论了雷达图和极地图。在本教程中，您将学习如何使用Chart.js创建饼图，甜甜圈图和气泡图。

创建饼图和甜甜圈图

当您想显示某事物在不同实体之间划分的比例时，饼图和甜甜圈图非常有用。例如，您可以使用饼图显示野生动物园中狮子的雄性，雌性和幼年狮子的百分比，或不同候选人在选举中获得的选票百分比。

饼图仅在您要比较一个特定参数或一组数据时才有用。要记住的重要一点是，您不能使用饼图来绘制值为零的实体，因为饼图中的扇区角度取决于数据点的大小。

这意味着任何份额为零的实体都不会显示在图表上。同样，您不能在饼图上绘制负值。您可以通过将type键设置为pie来在Chart.js中创建pie 。同样，你可以通过设置创建圆环图type关键doughnut 。这是创建这两个图表的示例：

var pieChart = new Chart(votesCanvas, {
    type: 'pie',
    data: votesData,
    options: chartOptions
});

var doughnutChart = new Chart(votesCanvas, {
    type: 'doughnut',
    data: votesData,
    options: chartOptions
});

让我们创建一个饼图，该饼图显示2015年排名前五位的国家的石油出口数据。数据以十亿美元为单位。

var data = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",
        "United Arab Emirates",
        "Canada"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ]
        }]
};

您可以使用cutoutPercentage类的不同键来控制上述图表的外观，该键定义从中间切出的图表的百分比。您还可以使用rotation键指定图表的起始角度。同样，您还可以使用circumference键指定在绘制数据时图表扫过的角度。

绘制图表时可以激活两种不同的动画。您可以使用animateRotate键指定图表是否应具有旋转动画。同样，您也可以使用animateScale键指定是否应从中心缩放甜甜圈图。 animateRotate的值默认设置为true ， animateScale的值默认设置为false 。

与往常一样，您可以分别使用backgroundColor ， borderColor和borderWidth键来控制所有数据点的背景色，边框颜色和边框宽度。同样，可以使用hoverBackgroundColor ， hoverBorderColor和hoverBorderWidth键控制所有这些属性的悬停值。

这是为上述数据创建一个甜甜圈图的代码。将rotation值设置为-Math.PI该起点逆时针旋转180度。然后，将circumference值设置为Math.PI可使图表仅跨半圆。

var oilData = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",
        "United Arab Emirates",
        "Canada"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ],
            borderColor: "black",
            borderWidth: 2
        }]
};

var chartOptions = {
  rotation: -Math.PI,
  cutoutPercentage: 30,
  circumference: Math.PI,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

创建气泡图

气泡图用于在图表上绘制或显示数据的三个维度（ p1 ， p2 ， p3 ）。气泡的位置和大小决定了这三个数据点的值。横轴表示第一数据点（p1），纵轴表示第二数据点（ p2 ），气泡的面积用于表示第三数据点（ p3 ）的值。

您应该记住的一件事是，第三个数据点的大小不是用气泡的半径来表示，而是用气泡的面积来表示。现在，圆的面积与半径的平方成比例。这意味着您必须确保绘制的气泡半径与第三个数据点的大小的平方根成比例。

您可以通过设置的价值创造chart.js之气泡图type钥匙bubble 。这是创建气泡图的示例。

var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData,
    options: chartOptions
});

让我们使用气泡图绘制保存在房间中的不同物品的重量。图表的数据需要以对象的形式传递。数据对象需要具有以下接口才能正确绘制。

{
    x: <Number>,
    y: <Number>,
    r: <Number>
}

气泡图和所有其他图表之间的重要区别是气泡半径不会随图表缩放。

例如，条形图中的条形宽度可以根据图表的大小而增加或减少。气泡图不会发生相同的情况。气泡的半径始终等于您指定的确切像素数。这是有道理的，因为在这种图表类型中，半径实际上是用来表示实际数据的。

让我们创建一个气泡图，以绘制森林中不同位置的鹿的数量。

var popData = {
  datasets: [{
    label: ['Deer Population'],
    data: [{
      x: 100,
      y: 0,
      r: 10
    }, {
      x: 60,
      y: 30,
      r: 20
    }, {
      x: 40,
      y: 60,
      r: 25
    }, {
      x: 80,
      y: 80,
      r: 50
    }, {
      x: 20,
      y: 30,
      r: 25
    }, {
      x: 0,
      y: 100,
      r: 5
    }],
    backgroundColor: "#FF9966"
  }]
};

由于此处的半径与实际大小的平方根成比例，因此（80，80）处的鹿数是（0，100）处的鹿数的100倍。

就像所有其他图表类型一样，您可以使用backgroundColor ， borderColor和borderWidth键控制绘制点的背景颜色，边框颜色和边框宽度。同样，您还可以使用hoverBackgroundColor ， hoverBorderColor和hoverBorderWidth键指定悬停背景颜色，悬停边框颜色和悬停边框宽度。

您还可以使用hoverRadius键指定要添加到悬停时不同气泡的附加半径。请记住，此半径已添加到原始值以绘制悬停的气泡。如果原始气泡的半径为10，并且hoverRadius设置为5，则鼠标悬停时气泡的半径将等于15。

var popData = {
  datasets: [{
    label: ['Deer Population'],
    data: [{
      x: 100,
      y: 0,
      r: 10
    }, {
      x: 60,
      y: 30,
      r: 20
    }, {
      x: 40,
      y: 60,
      r: 25
    }, {
      x: 80,
      y: 80,
      r: 50
    }, {
      x: 20,
      y: 30,
      r: 25
    }, {
      x: 0,
      y: 100,
      r: 5
    }],
    backgroundColor: "#9966FF",
    hoverBackgroundColor: "#000000",
    hoverBorderColor: "#9966FF",
    hoverBorderWidth: 5,
    hoverRadius: 5
  }]
};

上面的参数将创建以下气泡图。