十一、jqPlot 饼图和圆环图
Abstract
饼图和圆环图是将数据分解成各个组成部分的绝佳方式。饼图是一个圆形的图表，分为扇形或“切片”，其主要目的是说明它们的相对比例:每个切片的弧长与它所代表的数量成比例。圆环图与饼图非常相似，但中间有一个洞，并支持多个系列的比较。在这一章中，你将会看到这两种图表。本章最后讨论了多维饼图。
饼图和圆环图是将数据分解成各个组成部分的绝佳方式。饼图是一个圆形的图表，分为扇形或“切片”，其主要目的是说明它们的相对比例:每个切片的弧长与它所代表的数量成比例。圆环图与饼图非常相似，但中间有一个洞，并支持多个系列的比较。在这一章中，你将会看到这两种图表。本章最后讨论了多维饼图。
饼图
在 jqPlot 中，默认情况下，数据被解释为折线图。如果您想在饼图中显示您的数据，您需要包括 PieRenderer 插件:
<script type="text/javascript" src="../src/plugins/jqplot.pieRenderer.min.js">
</script>
或者，如果您更喜欢使用内容交付网络(CDN)服务，您可以按如下方式操作:
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/pluginsT3】
T0T1】
为了更好地理解这个插件的用法，让我们以一个人在给定时间内消耗的食物量为例。在这种情况下，饼图被证明是数据表示的最佳选择。所有吃的食物组成了整个群体，各种类型的食物就是你要比较的成分。每一种食物都将由一片用不同颜色标识的薄片来代表。每一片的大小将给出一个食物种类在一个人饮食中所占比例的精确概念。你可以从[label，amount]对值的数据数组开始，如清单 11-1 所示。
清单 11-1。ch11_01a.html
var data = [ ['Dairy', 212],['Meat', 140], ['Grains', 276],
['Fish', 131],['Vegetables', 510], ['Fruit', 325] ];
现在，您可以定义选项。正如您在清单 11-2 中看到的，您需要激活插件并将其应用于defaultSeries对象。
清单 11-2。ch11_01a.html
var options = {
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
}
};
$.jqplot ('myChart', [data], options);
图 11-1 显示了一个简单的饼图，没有附加属性的说明。
图 11-1。
A simple pie chart
如图 11-1 所示，在其扇区内，饼图默认报告百分比。相反，如果您想要显示该值，如图 11-2 的右上角所示，您需要在renderOptions中的dataLabels属性上设置'value'，如清单 11-3 所示。
清单 11-3。ch11_01b.html
rendererOptions: {
showDataLabels: true,
dataLabels: 'value'
}
如果你想添加一个边距来分隔饼图的各个部分，如图 11-2 的左下方所示，我们需要将sliceMargin属性设置为 6(参见清单 11-4)。
清单 11-4。ch11_01c.html
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
sliceMargin: 6
}
此外，如果你想显示带有空切片的饼状图，如图 11-2 的右下方所示，你可以将fill属性设置为'false'并将lineWidth属性设置为 5，以便用稍微粗一点的线条来给切片加阴影(见清单 11-5)。
清单 11-5。ch11_01d.html
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
sliceMargin: 6,
fill: false,
// stroke the slices with a little thicker line.
lineWidth: 5
}
图 11-2。
Different ways to set a pie chart
圆环图
饼图的一个主要问题是它们不能同时显示多个系列。因此，您必须决定是否用饼图单独表示每个系列，或者最好使用圆环图(也拼写为“甜甜圈”)。这种图表需要并使用与饼图相同的选项；因此，从饼图到圆环图的转换是即时的。您将通过一个简单的例子来了解这种转换的简单性。
首先，与饼图一样，您需要包含一个特定的插件来获得一个圆环图:
<script type="text/javascript" src="../src/plugins/jqplot.donutRenderer.min.js"> </script>
你必须在options对象中做的唯一改变是在渲染器调用中用DonutRenderer替换pieRenderer对象，然后修改rendererOptions object中第一个扇区的起始角度。默认情况下，图表从圆圈的左侧开始，但通常必须从顶部开始。因此，有必要将startAngle属性设置为–90 度(见清单 11-6)。
清单 11-6。ch11_02.html
var options = {
seriesDefaults: {
// Make this a pie chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
sliceMargin: 3,
startAngle: -90
}
}
};
jQuery.jqplot ('myChart', [data], options);
这样你就得到了一个甜甜圈图(见图 11-3 ，与图 11-2 右下方的饼状图非常相似。
图 11-3。
A simple donut chart
但是，我们选择使用圆环图而不是饼图，因为它允许我们同时表示多个系列，从而比较其组成部分的比例。因此，继续这个例子，你可以比较两个不同群体的人所吃的食物。清单 11-7 说明了如何添加另一个数据数组。
清单 11-7。ch11_02.html
var data2 = [
['Dairy', 185],['Meat', 166], ['Grains', 243],
['Fish', 166],['Vegetables', 499], ['Fruit', 370]
];
将第二个数组添加到data，修改清单:
$.jqplot ('myChart', [data,``data2T2】
图 11-4 展示了报告两个数值系列的圆环图。
图 11-4。
A multiseries donut chart
看着图 11-4 ，你可以立刻看到一些基本的东西不见了:一个图例。图例是必需的，因为插件会自动为每个扇区分配一种颜色，因此没有颜色参考，很难理解图表。因此，在您将图例的show属性设置为'true'之后，您可以选择图例的位置。为了确定在哪个位置放置图例，jqPlot 使用 location 属性，将与基本方向对应的值分配给该属性:'n'(北)、's'(南)、'e'(东)和'w'(西)。但是，也可以使用组合，例如'ne'，来指示东北方向的位置。
假设您决定将图例定位在图表的右侧，那么您将'e'分配给location属性(参见清单 11-8)。
清单 11-8。ch11_02.html
legend: {
show:true,
location: 'e'
}
图例自动报告数据数组中包含的标签，如图 11-5 所示。
图 11-5。
A multiseries donut chart with a legend
多级饼图
多级饼图是一种现代格式，非常适合可视化用于显示层次关系的数据。这种图表提供了一个层次结构，从圆圈中心的根节点开始，您可以跟踪成员资格，因为它们逐渐移动到外部圆圈。为了更好地理解这种图表，让我们以一系列动物为例，逐步确定它们的等级群体。
作为输入数据数组，你想插入三个数组(见清单 11-9)。这将产生三个层次。在第一个数组中，插入最后一级，直到第三个数组，它代表根。
清单 11-9。ch11_03.html
var data = [ ['Cat', 1],['Dog', 1], ['Mouse', 1],['Snake', 1],
['Turtle', 1], ['Jellyfish', 1], ['Cuttlefish', 1] ];
var data2 = [ ['Mammals', 3],['Reptiles', 2], ['Mollusks', 2] ];
var data3 = [ ['Vertebrates', 5],['Invertebrates', 2] ];
要生成多级饼图，实际上需要修改一个圆环图，将内孔的直径设置为零。在这种情况下，您需要显示标签所代表的动物或动物群的名称，而不是显示数值；您必须将dataLabels属性设置为'label'。最后要修改的是颜色的设置。jqPlot 提供的默认颜色是不够的，有必要为层次结构的每个级别定义一组颜色。优选地，将相似的颜色分配给属于同一组的动物，并且对于层级的连续级别也是如此。在清单 11-10 中，特别注意了分配给每个系列的颜色序列(层次级别)。
清单 11-10。ch11_03.html
var options = {
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'label',
startAngle: -90,
innerDiameter: 0,
ringMargin: 2,
shadow: false
}
},
series: [
{
seriesColors: ['#4bb2c5', '#4baacc', '#4b88aa', '#bbb2c5',
'#bbaa99', '#c5dd99', '#dddd77']
},
{
seriesColors: ['#4bbbbb', '#ccb2c5', '#c5ff99']
},
{
seriesColors: ['#aa5555', '#a3ffaa']
}]
};
$.jqplot ('myChart', [data, data2, data3], options);
最终，你的努力会得到图 11-6 中的多级饼图的回报。
图 11-6。
A multilevel pie chart
摘要
在本章中，您已经了解了 jqPlot 库如何允许您通过饼图(具有单个数据系列)或圆环图(具有多个数据系列)来表示数据，同时还可以快速了解一些主要属性以及如何在选项中设置它们。在本章的最后一部分，您创建了一个多级饼图:这是一个经典的例子，说明了如何通过适当地修改某些属性来生成一种不属于库所建议的标准图表的图表类型。
在下一章中，您将看到 jqPlot 库如何让您实现蜡烛图，以及如何处理特定的数据格式开盘-盘高-盘低-收盘(OHLC)，这是这种图表的基础。
版权属于：月萌API www.moonapi.com，转载请注明出处
