找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › WijmoJS专区 › 求助中心 › 查看内容
发新帖

gw0506

超级版主

177

主题

4208

帖子

9025

积分

超级版主

Rank: 8Rank: 8

积分
9025

活字格认证

最新发帖

Wijmo 更优美的jQuery UI部件集：复合图表(CompositeChart)

gw0506
超级版主   /  发表于：2012-5-8 14:39  /   查看：7049  /  回复：0
Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据。相同的数据可以使用不同的可视化效果，不同的图表类型展现在一个图表内，使得用户可以从不同的角度，了解分析这组数据所表达的内容 。
本文将介绍如何使用Wijmo的CompositeChart控件，制作一个复合图表。CompositeChart 的API：http://wijmo.com/wiki/index.php/Compositechart，Wijmo 的CompositeChart 化繁为简，将传统 Excel like图表中的三大区域: Plot Area, Legend Area, Label Area, 分离成为更为简单的API: SeriesList, Legend, Axis, Hint, 使得开发者更加容易的理解和使用。

Wijmo的CompositeChart 依赖于下面的这5个核心的JavaScript库:
raphael.js
globalize.min.js
jquery.ui.widget.js
jquery.wijmo.raphael.js
jquery.wijmo.wijchartcore.js

如果需要加入别的类型的Chart，需要再引入其它Chart类型的JavaScript库，这样可以使得开发者可以灵活定制并裁剪出适合自己用例的JavaScript库。例如本实例使用了 PieChart, BarChart, LineChart, 引入的JavaScript库如下：

jquery-1.7.1.min.js
jquery-ui-1.8.18.custom.min.js
globalize.min.js
raphael-min.js
jquery.wijmo.raphael.js
jquery.wijmo.wijchartcore.js
jquery.wijmo.wijbarchart.js
jquery.wijmo.wijpiechart.js
jquery.wijmo.wijlinechart.js
jquery.wijmo.wijcompositechart.js

写点代码，设置一下Chart :
  1. $(document).ready(function () {
  2. $("#wijcompositechart").wijcompositechart({
  3. axis: {
  4. y: {
  5. text: "Total Hardware"
  6. },
  7. x: {
  8. text: ""
  9. }
  10. },
  11. stacked: false,
  12. hint: {
  13. content: function () {
  14. return this.label + '\n ' + this.y + '';
  15. }
  16. },
  17. header: {
  18. text: "Hardware Distribution"
  19. },
  20. seriesList: [{
  21. type: "column",
  22. label: "West",
  23. legendEntry: true,
  24. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
  25. }, {
  26. type: "column",
  27. label: "Central",
  28. legendEntry: true,
  29. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
  30. }, {
  31. type: "column",
  32. label: "East",
  33. legendEntry: true,
  34. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
  35. }, {
  36. type: "pie",
  37. label: "asdfdsfdsf",
  38. legendEntry: true,
  39. center: { x: 150, y: 150 },
  40. radius: 60,
  41. data: [{
  42. label: "MacBook Pro",
  43. legendEntry: true,
  44. data: 46.78,
  45. offset: 15
  46. }, {
  47. label: "iMac",
  48. legendEntry: true,
  49. data: 23.18,
  50. offset: 0
  51. }, {
  52. label: "MacBook",
  53. legendEntry: true,
  54. data: 20.25,
  55. offset: 0
  56. }]
  57. }, {
  58. type: "line",
  59. label: "Steam1",
  60. legendEntry: true,
  61. data: {
  62. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
  63. y: [3, 6, 2, 9, 5]
  64. },
  65. markers: {
  66. visible: true,
  67. type: "circle"
  68. }
  69. }, {
  70. type: "line",
  71. label: "Steam2",
  72. legendEntry: true,
  73. data: {
  74. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
  75. y: [1, 3, 4, 7, 2]
  76. },
  77. markers: {
  78. visible: true,
  79. type: "tri"
  80. }
  81. }
  82. ]
  83. });
  84. });
复制代码
代码不多，就有了下图的效果:




代码不多，很好分析：
  1. --
  2. axis: {
  3. y: {
  4. text: "Total Hardware"
  5. },
  6. x: {
  7. text: ""
  8. }
  9. --
  10. 设置X，Y 轴。
  11. ---
  12. stacked: false
  13. ---
  14. 设置Bar 为非stacked.
  15. ---
  16. hint: {
  17. content: function () {
  18. return this.label + '\n ' + this.y + '';
  19. }
  20. },
  21. ---
  22. 设置鼠标 Tooltip.
  23. ---
  24. header: {
  25. text: "Hardware Distribution"
  26. },
  27. ---
  28. 设置图表头.
  29. ----
  30. seriesList: [{
  31. type: "column",
  32. label: "West",
  33. legendEntry: true,
  34. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
  35. }, {
  36. type: "column",
  37. label: "Central",
  38. legendEntry: true,
  39. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
  40. }, {
  41. type: "column",
  42. label: "East",
  43. legendEntry: true,
  44. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
  45. }, {
  46. type: "pie",
  47. label: "asdfdsfdsf",
  48. legendEntry: true,
  49. center: { x: 150, y: 150 },
  50. radius: 60,
  51. data: [{
  52. label: "MacBook Pro",
  53. legendEntry: true,
  54. data: 46.78,
  55. offset: 15
  56. }, {
  57. label: "iMac",
  58. legendEntry: true,
  59. data: 23.18,
  60. offset: 0
  61. }, {
  62. label: "MacBook",
  63. legendEntry: true,
  64. data: 20.25,
  65. offset: 0
  66. }]
  67. }, {
  68. type: "line",
  69. label: "Steam1",
  70. legendEntry: true,
  71. data: {
  72. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
  73. y: [3, 6, 2, 9, 5]
  74. },
  75. markers: {
  76. visible: true,
  77. type: "circle"
  78. }
  79. }, {
  80. type: "line",
  81. label: "Steam2",
  82. legendEntry: true,
  83. data: {
  84. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
  85. y: [1, 3, 4, 7, 2]
  86. },
  87. markers: {
  88. visible: true,
  89. type: "tri"
  90. }
  91. }
  92. ]
  93. ----
复制代码
设置 SeriesList，每个Series 可以设置其type, label, legendEntry, data, 等等属性。 Series可以设置 SeriesStyles, 和 SeriesHoverStyles, 如:
  1. seriesStyles: [{
  2. fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
  3. }],
  4. seriesHoverStyles: [{
  5. "stroke-width": "1.5", opacity: 1
  6. }]
复制代码
经过上面的设置，这个CompositeChart就设置好了。也可以使用Server返回的 Json 数据动态绑定生成Chart。

点击这里下载，本文实例代码。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部