饼图和仪表图:使用 Plotly.js 解锁交互性,第 5 部分

wufei123 2024-06-02 阅读:8 评论:0
如果您从一开始就关注本系列,您可能已经注意到 Plotly.js 使用相同的 scatter 类型来创建折线图和气泡图。唯一的区别是,我们在创建折线图时必须将 mode 设置为 lines,而在创建气泡图时必须将 markers 设置为...

饼图和仪表图:使用 plotly.js 解锁交互性,第 5 部分

如果您从一开始就关注本系列,您可能已经注意到 Plotly.js 使用相同的 scatter 类型来创建折线图和气泡图。唯一的区别是,我们在创建折线图时必须将 mode 设置为 lines,而在创建气泡图时必须将 markers 设置为 mode。

同样,Plotly.js 允许您通过对 type 属性使用相同的值并根据您要创建的图表更改其他属性的值来创建饼图、圆环图和仪表图。

在 Plotly.js 中创建饼图

您可以通过将 type 属性设置为 pie 来在 Plotly.js 中创建饼图。还有其他属性,例如 opacity、visible 和 name 也是其他图表类型所共有的。 name 属性用于提供当前饼图跟踪的名称。该名称随后显示在图例中以供识别。您可以通过将 showlegend 属性分别设置为 true 或 false 来显示或隐藏图表图例中的饼图跟踪。您可以使用 labels 属性为饼图的不同部分设置标签名称。

对于饼图,标记对象用于控制图表不同部分的外观。嵌套在 marker 中的 color 属性可用于设置饼图每个扇区的颜色。不同扇区的颜色可以指定为 color 属性的数组值。

您还可以使用嵌套在线条对象内的 color 和 width 属性来设置包围每个扇区的所有线条的颜色和宽度。您还可以选择使用布尔值 sort 属性对饼图的所有扇区从大到小进行排序。同样,借助 direction 属性,可以将扇区的方向更改为 顺时针 或 逆时针 。

以下代码创建一个基本饼图,其中列出了世界上前五个国家的森林面积。

var pieDiv = document.getElementById("pie-chart"); var traceA = { type: "pie", values: [8149300, 4916438, 4776980, 3100950, 2083210], labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'] }; var data = [traceA]; var layout = { title: "Area Under Forest for Different Countries" }; Plotly.plot(pieDiv, data, layout);

如您所见,我们不再使用 x 和 y 属性来指定我们要绘制的点。现在,这是在 values 和 labels 的帮助下完成的。百分比是根据输入值自动确定的。

默认情况下,饼图的第一片从 12 点开始。您可以使用 rotation 属性更改图表的起始角度,该属性接受 -360 到 360 之间的值。默认的 12 点钟值等于角度 0。

如果您希望图表中的某个切片脱颖而出,您可以使用 pull 属性,该属性可以接受一个数字或值在 0 到 1 之间的数字数组。 pull 属性用于从饼图中拉出指定的扇区。拉动距离等于馅饼或甜甜圈较大半径的一小部分。

通过指定 hole 属性的值,可以非常轻松地将饼图转换为圆环图。它将从饼图中切出给定的半径部分以制作圆环图。

您可以使用嵌套在标记对象内的 colors 属性来控制饼图中各个扇区的颜色。还可以借助嵌套在线条对象内的 width 和 color 属性来更改包围每个扇区的线条的宽度和颜色。包围线的默认宽度为 0。这意味着默认情况下不会在扇区周围绘制任何线。

还有一个 hovertext 属性,可用于为每个单独的扇区提供一些额外的文本信息。当观看者将鼠标悬停在某个扇区上时,他们将可以看到这些信息。显示文本的条件之一是 hoverinfo 属性应包含 text 标志。您可以使用嵌套在 insidetextfont 和 outsidetextfont 分别是对象。

以下代码使用之前饼图中的数据来创建一个圆环图,该圆环图使用我们刚刚了解的其他属性。

var pieDiv = document.getElementById("pie-chart"); var traceA = { type: "pie", values: [8149300, 4916438, 4776980, 3100950, 2083210], labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'], hole: 0.25, pull: [0.1, 0, 0, 0, 0], direction: 'clockwise', marker: { colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'], line: { color: 'black', width: 3 } }, textfont: { family: 'Lato', color: 'white', size: 18 }, hoverlabel: { bgcolor: 'black', bordercolor: 'black', font: { family: 'Lato', color: 'white', size: 18 } } }; var data = [traceA]; var layout = { title: "Area Under Forest for Different Countries" }; Plotly.plot(pieDiv, data, layout);

在 Plotly.js 中创建仪表图表

仪表图的基本结构与圆环图类似。这意味着我们可以使用一些巧妙选择的值并通过仍然将 type 属性设置为 pie 来创建简单的仪表图表。基本上,我们将隐藏整个饼图的某些部分,使其看起来像仪表图。

首先,我们需要为 values 属性选择一些值。为了简单起见,我将使用饼图的上半部分作为我的仪表图。这意味着这些值应该在我想要可见的部分和我想要隐藏的饼图部分之间平均分配。图表的可见部分可以进一步分为更小的部分。以下是为仪表图表选择值的示例。

values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]

上行中的数字 100 是任意的。可以看到,前五个切片加起来是100,这也是为饼图隐藏区域设置的值。这将整个馅饼平均分为隐藏部分和可见部分。

这是创建基本仪表图表的完整代码。您应该注意到,我已将应隐藏的扇区的颜色属性设置为白色。同样,相应扇区的 text 和 labels 值也已设置为空字符串。 rotation 属性已设置为 90,以便图表不会从默认的 12 点钟位置绘制。

var gaugeDiv = document.getElementById("gauge-chart"); var traceA = { type: "pie", showlegend: false, hole: 0.4, rotation: 90, values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100], text: ["Very Low", "Low", "Average", "Good", "Excellent", ""], direction: "clockwise", textinfo: "text", textposition: "inside", marker: { colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"] }, labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""], hoverinfo: "label" };

代码的下一部分涉及仪表图表的指针。您为 Degrees 变量设置的值将确定绘制针的角度。 radius 变量决定针的长度。属性 x0 和 y0 用于设置线条的起点。同样,属性 x1 和 y1 用于设置线条的终点。

您可以借助 SVG 路径为针创建更复杂的形状。您所要做的就是将 type 属性设置为 path 并使用 path 属性指定实际路径。您可以在参考的布局形状部分阅读更多相关信息。

var degrees = 115, radius = .6; var radians = degrees * Math.PI / 180; var x = -1 * radius * Math.cos(radians); var y = radius * Math.sin(radians); var layout = { shapes:[{ type: 'line', x0: 0, y0: 0, x1: x, y1: 0.5, line: { color: 'black', width: 8 } }], title: 'Number of Printers Sold in a Week', xaxis: {visible: false, range: [-1, 1]}, yaxis: {visible: false, range: [-1, 1]} }; var data = [traceA]; Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});

本节的所有代码都会创建以下仪表图表。目前,该图表不是很奇特,但它可以作为一个很好的起点。

最终想法

在本教程中,您学习了如何使用 Plotly.js 中的 pie 跟踪类型创建饼图和圆环图。您还学习了如何仔细设置一些属性的值,以将这些饼图转换为简单的仪表图。您可以在参考页面上阅读有关饼图及其不同属性的更多信息。

这是我们的交互式 Plotly.js 图表系列的最后一个教程。第一个介绍性教程为您提供了该库的概述。第二、第三和第四教程分别向您展示了如何创建折线图、条形图和气泡图。我希望您喜欢本教程以及整个系列。如果您有任何疑问,请随时在评论中告诉我。

以上就是饼图和仪表图:使用 Plotly.js 解锁交互性,第 5 部分的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • 华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀

    华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀
    华为 mate 70 或将首发麒麟新款处理器,并将此前有博主爆料其性能跑分将突破110万,这意味着 mate 70 性能将重新夺回第一梯队。也因此,苹果 iphone 16 唯一能有一战之力的性能,也要被 mate 70 拉近不少了。 据悉,华为 Mate 70 性能会大幅提升,并且销量相比 Mate 60 预计增长40% - 50%,且备货充足。如果 iPhone 16 发售日期与 Mate 70 重合,销量很可能被瞬间抢购。 不过,iPhone 16 还有一个阵地暂时难...
  • 酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元

    酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元
    本站 5 月 16 日消息,酷凛 id-cooling 近日推出霜界 240/360 一体式水冷散热器,采用黑色无光低调设计,分别定价 239/279 元。 本站整理霜界 240/360 散热器规格如下: 酷凛宣称这两款水冷散热器搭载“自研新 V7 水泵”,采用三相六极马达和改进的铜底方案,缩短了水流路径,相较上代水泵进一步提升解热能力。 霜界 240/360 散热器的水泵为定速 2800 RPM 设计,噪声 28db (A)。 两款一体式水冷散热器采用 27mm 厚冷排,...
  • 惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起

    惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起
    本站 5 月 14 日消息,继上线官网后,新款惠普战 99 商用笔记本现已上架,搭载酷睿 ultra / 锐龙 8040处理器,最高可选英伟达rtx 3000 ada 独立显卡,售价 4999 元起。 战 99 锐龙版 R7-8845HS / 16GB / 1TB:4999 元 R7-8845HS / 32GB / 1TB:5299 元 R7-8845HS / RTX 4050 / 32GB / 1TB:7299 元 R7 Pro-8845HS / RTX 2000 Ada...
  • Nginx服务器的HTTP/2协议支持和性能提升技巧介绍

    Nginx服务器的HTTP/2协议支持和性能提升技巧介绍
    Nginx服务器的HTTP/2协议支持和性能提升技巧介绍 引言:随着互联网的快速发展,人们对网站速度的要求越来越高。为了提供更快的网站响应速度和更好的用户体验,Nginx服务器的HTTP/2协议支持和性能提升技巧变得至关重要。本文将介绍如何配置Nginx服务器以支持HTTP/2协议,并提供一些性能提升的技巧。 一、HTTP/2协议简介:HTTP/2协议是HTTP协议的下一代标准,它在传输层使用二进制格式进行数据传输,相比之前的HTTP1.x协议,HTTP/2协议具有更低的延...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...