Default pie chart

 

The default pie chart with no options set.

Source Code

$.plot('#placeholder', data, {
series: {
pie: {
show: true
}
}
});

Pie Options

  • option: default value - Description of option
  • show: false - Enable the plugin and draw as a pie.
  • radius: 'auto' - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.
  • innerRadius: 0 - Sets the radius of the donut hole. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the radius, otherwise it will use the value as a direct pixel length.
  • startAngle: 3/2 - Factor of PI used for the starting angle (in radians) It can range between 0 and 2 (where 0 and 2 have the same result).
  • tilt: 1 - Percentage of tilt ranging from 0 and 1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn).
  • shadow:
    • top: 5 - Vertical distance in pixel of the tilted pie shadow.
    • left: 15 - Horizontal distance in pixel of the tilted pie shadow.
    • alpha: 0.02 - Alpha value of the tilted pie shadow.
  • offset:
    • top: 0 - Pixel distance to move the pie up and down (relative to the center).
    • left: 'auto' - Pixel distance to move the pie left and right (relative to the center).
  • stroke:
    • color: '#FFF' - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).
    • width: 1 - Pixel width of the border of each slice.
  • label:
    • show: 'auto' - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.
    • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
    • threshold: 0 - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.
    • formatter: [function] - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").
    • radius: 1 - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.
    • background:
      • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.
      • opacity: 0 - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.
  • combine:
    • threshold: 0 - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).
    • color: null - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.
    • label: 'Other' - Label text for the combined slice.
  • highlight:
    • opacity: 0.5 - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.

Changes/Features

  • v1.0 - November 20th, 2009 - Brian Medendorp
  • The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.
  • Added a new option (innerRadius) to add a "donut hole" to the center of the pie, based on comtributions from Anthony Aragues. I was a little reluctant to add this feature because it doesn't work very well with the shadow created for the tilted pie, but figured it was worthwhile for non-tilted pies. Also, excanvas apparently doesn't support compositing, so it will fall back to using the stroke color to fill in the center (but I recommend setting the stroke color to the background color anyway).
  • Changed the lineJoin for the border of the pie slices to use the 'round' option. This should make the center of the pie look better, particularly when there are numerous thin slices.
  • Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.
  • The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.
  • Hover and Click functionality are now availabe!
    • Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!
    • Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available.
    • I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.
    • Warning: There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.
  • Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery

Pie Charts的更多相关文章

  1. Pizza Pie Charts – 基于 Snap SVG 框架的响应式饼图

    Pizza Pie Charts 是一个基于 Adobe 的 Snap SVG 框架的响应式饼图插件.它着重于集成 HTML 标记和 CSS,而不是 JavaScript 对象,当然Pizza Pie ...

  2. Qt Charts示例

    Qt 5.7 有一些变化,把原来商业版的几个模块用GPLv3协议放到了社区版本里: Qt Charts (GPLv3) Qt Data Visualization (GPLv3) Qt Virtual ...

  3. 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...

  4. [转]Charts (Report Builder and SSRS)

    本文转自:https://docs.microsoft.com/en-us/sql/reporting-services/report-design/charts-report-builder-and ...

  5. Charts in Ionic

    Chart对于任何应用来说都是不可或缺的一部分,hybrid app也是如此. 先罗列一下有哪些可用的Chart library: D3.JS -- Data-Driven Documents,BSD ...

  6. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  7. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  8. EF 5 最佳实践白皮书

    Performance Considerations for Entity Framework 5 By David Obando, Eric Dettinger and others Publish ...

  9. Displaying Data in a Chart with ASP.NET Web Pages (Razor)

    This article explains how to use a chart to display data in an ASP.NET Web Pages (Razor) website by ...

随机推荐

  1. SQL 行转列

    ---1.最简单的行转列/* 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93李四 语文 74李四 数学 84李四 物理 94 想变成(得到如下结 ...

  2. 断开SVN连接操作方法

    SVN是日常项目管理中经常使用到的工具,然而拷贝备份需要与SVN服务器断开连接,具体操作步骤: 1.在桌面建立一个文本文件,取名为kill-svn-folders.reg(扩展名由txt改为reg), ...

  3. ASP.NET WEB API 初探

    本文初步介绍如何简单创建一个ASP.NET Web Api 程序. Web Api 顾名思义就是一个Api接口,客户端可调用此接口进行业务操作.此类应用与 ASP.NET  web服务(即使用扩展名. ...

  4. Amoeba For MySQL入门:实现数据库水平切分

    当系统数据量发展到一定程度后,往往需要进行数据库的垂直切分和水平切分,以实现负载均衡和性能提升,而数据切分后随之会带来多数据源整合等等问题.如果仅仅从应用程序的角度去解决这类问题,无疑会加重应用程度的 ...

  5. 对C#调用C++ dll文件进行总结

    在实际项目工作中,经常用到C#调用C++ 或者C编写的dll文件. dll支持一般函数声明和类的定义声明,但是一般为了简化,都是 采用函数声明的方式.这里主要并不是写 dll的编写. 先在vs中创建一 ...

  6. L1范式和L2范式的区别

    L1 and L2 regularization add a cost to high valued weights to prevent overfitting. L1 regularization ...

  7. MongoDB之【增加用户认证、增加用户、删除用户、修改用户密码、读写权限、只读权限】

    说明:增加用户是针对数据库进行操作 1.进入到数据库 use dbname 2.针对当前数据库添加用户 权限是针对当前数据 1.添加并验证用户 > use admin > db.addUs ...

  8. CSS控制 table 的 cellpadding,cellspacing

    CSS 常规解决办法: 表格的 cellpadding 和 cellspacing 我们经常会用如下的方式来清除默认样式: <table cellspacing="0" ce ...

  9. Websocket协议之php实现

    前面学习了HTML5中websocket的握手协议.打开和关闭连接等基础内容,最近用php实现了与浏览器websocket的双向通信.在学习概念的时候觉得看懂了的内容,真正在实践过程中还是会遇到各种问 ...

  10. phpcms v9 自定义伪静态的分页函数

    因为.这个页面还没做好..等做好了..再给大家演示...... 调用方法:$page_attr=pages_open($num[0]['cun'],$get_page,$max_page,'http: ...