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

   2025-07-19 admin00100

如果您从一开始就关注本系列,您可能已经注意到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属性,可以将扇区的方向更改为顺时针或逆时针。

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

cript;toolbal:false;">varpieDiv=document.getElementById("pie-chart");vartraceA={type:"pie",values:[8149300,4916438,4776980,3100950,2083210],labels:['Russia','Canada','Brazil','UnitedStates','China']};vardata=[traceA];varlayout={title:"AreaUnderForestforDifferentCountries"};Plotly.plot(pieDiv,data,layout);
 
举报收藏 0打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  RSS订阅
Powered By DESTOON