1、HighCharts之2D柱状图源码

column.html：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HighCharts 2D柱状图</title>
  6. <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
  7. <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
  8. <!-- <script type="text/javascript" src="../scripts/js/modules/exporting.js"></script> -->
  9. <script type="text/javascript">
  10. $(function(){
  11. $('#columnChart').highcharts({
  12. chart: {
  13. type: 'column'
  14. },
  15. title: {
  16. text: '2013年月收入'
  17. },
  18. subtitle: {
  19. text: '月收入'
  20. },
  21. xAxis: {
  22. categories: [
  23. '一月',
  24. '二月',
  25. '三月',
  26. '四月',
  27. '五月',
  28. '六月',
  29. '七月',
  30. '八月',
  31. '九月',
  32. '十月',
  33. '十一月',
  34. '十二月'
  35. ]
  36. },
  37. yAxis: {
  38. min: 0,
  39. title: {
  40. text: '收入 (￥)'
  41. }
  42. },
  43. tooltip: {
  44. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  45. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  46. '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
  47. footerFormat: '</table>',
  48. shared: true,
  49. useHTML: true
  50. },
  51. plotOptions: {
  52. column: {
  53. pointPadding: 0.2,
  54. borderWidth: 0
  55. }
  56. },
  57. series: [{
  58. name: '张三',
  59. data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]
  60. }, {
  61. name: '李思',
  62. data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]
  63. }, {
  64. name: '王武',
  65. data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]
  66. }, {
  67. name: '赵六',
  68. data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]
  69. }]
  70. });
  71. });
  72. </script>
  73. </head>
  74. <body>
  75. <div id="columnChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
  76. </body>
  77. </html>

2、运行结果

HighCharts之2D柱状图的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  3. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  4. HighCharts之2D堆柱状图

    HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...

  5. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  6. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  7. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  8. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  9. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

随机推荐

  1. 第三章 深入 ZAB 协议

    上一节介绍了ZAB协议的内容,本节将从系统模型.问题描述.算法描述和运行分析四方面来深入了解 ZAB 协议. 系统模型 在一个由一组进程 n ={P1,P2,...Pn}组成的分布式系统中,每一个进程 ...

  2. [转载] 散列表(Hash Table)从理论到实用（上）

    转载自:白话算法(6) 散列表(Hash Table)从理论到实用(上) 处理实际问题的一般数学方法是,首先提炼出问题的本质元素,然后把它看作一个比现实无限宽广的可能性系统,这个系统中的实质关系可以通 ...

  3. 自定义php安装（2）—mysql安装和php整合

    1.      写一段php 代码来测试是否成功! //目前你看不懂,没关系 <?php $conn=mysql_connect("localhost","root ...

  4. Java如何将html转以后的字符转化成正常显示的字符

    String str = "“!@#￥%……&——+”";//“!@#￥%……&——+”  中文状态下的标点符号,进过html转换了 String convStr ...

  5. oracle 多级菜单查询 。start with connect by prior

    select * from S_dept where CODE in(select sd.code from s_dept sd start with sd.code='GDKB' connect b ...

  6. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...

  7. (mysql)Packet for query is too large

    http://jingyan.baidu.com/article/fb48e8be3f81716e622e14ee.html windows如何重启mysql 开始->运行->cmd 停止 ...

  8. 2007Hanoi双塔问题

    题目描述 Description 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的(下图为n=3的情形).现 ...

  9. Yii中事件触发机制

    控制器初始化中添加事件处理方法,在需要触发的地方直接触发 public function init() { parent::init(); // TODO: Change the autogenera ...

  10. expect工具的简单用法

    原创文档,转载请注明作者与本文URL. linux中的expect工具很不错,能够自动实现交互,也即是说自己自动进行ssh登录等动作.这是我写的一个简单的用法,稍作修改就可以变成很实用都脚本.有人介绍 ...