本教程扩展了上图。JS课程,其中涵盖了行和条形图。在这里,我们将探索雷达和极地区域图表,并提供简洁的概述,然后提供详细的解释。
了解雷达图
线条和条形图在比较众多数据点(例如,亚洲国家的人口)的一个或两个属性方面表现出色。但是,当比较仅几个数据点的许多属性(例如,三个液体的属性)时,雷达图表更加有效。它也称为蜘蛛图,它有效地可视化并比较了多个变量。
如Wikipedia所定义的那样,雷达图以图形方式代表使用源自中心点的轴的多元数据。轴的角度和相对位置通常不显着。
让我们构建我们的第一个雷达图表。我们通过将“ r”设置为“ x”或“ angle”键内的比例键来实现这一目标。同样,通过将“ Animatortate”设置为“动画”对象中的“ false”来完成禁用旋转动画。
以下代码增强了图表的视觉吸引力:
var chartoptions = { 插件:{ 标题: { 显示:是的, 位置:“底部”, 文字:“不同季节的候鸟” },, 传奇: { 对齐:“中心”, 位置:“左”, 标签:{ 字体:{ 尺寸:16 } } } },, 动画片: { 动画:false },, 秤:{ R:{ tick:{ 字体:{ 尺寸:16 },, 颜色:“白色”, 背景:“黑色” } } },, 元素:{ 弧:{ 角度:180, 边界彩色:“黑色” } } };
除了动画控制之外,我们还重新定位了左侧的传说,从而提高了图表的可读性。
结论
该教程展示了雷达和极性区域图表的实际应用,以及如何使用Chart.js的配置选项创建和自定义它们。未来的教程将涵盖PIE,DONUT和BUBBLE图表。有关进一步的JavaScript资源和框架,请探索Envato市场。
以上是JS:雷达和极地图表的开始的详细内容。更多信息请关注PHP中文网其他相关文章!