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. scala学习心得3

    在scala中可以定义函数字面量参数,定义方式如下:

  2. 如何在十分钟内插入1亿条记录到Oracle数据库？

    这里提供一种方法,使用 APPEND 提示,使得十分钟内插入上亿数据成为可能. -- Create table create table TMP_TEST_CHAS_LEE ( f01 VARCHAR ...

  3. Linux中安装和使用rz、sz命令

    安装命令: yum install lrzsz 从服务端发送文件到客户端: sz filename 从客户端上传文件到服务端: rz在弹出的框中选择文件,上传文件的用户和组是当前登录的用户 Secur ...

  4. Struts2复习笔记

    一.Struts2的获得 Struts2的官网是http://struts.apache.org/,需要的同学可以自己去官网上下载. 二.Struts2的配置 以动态web项目为例,讲解配置Strut ...

  5. TFS与Eclipse、Microsoft Visual Studio等客户端以webservice进行交换。

    TFS与eclipse.Microsoft Visual Studio等客户端以webservice进行交互. 参考地址: http://server_ip:8080/tfs/项目区域/version ...

  6. Oracle游标带参数

    Oracle游标是可以带参数的,而SqlServer的游标就不可以了 create or replace procedure a as cursor b(c_id int)is select * fr ...

  7. P1-概率论基础（Primer on Probability Theory）

    2.1概率密度函数 2.1.1定义 设p(x)为随机变量x在区间[a,b]的概率密度函数,p(x)是一个非负函数,且满足 注意概率与概率密度函数的区别. 概率是在概率密度函数下对应区域的面积,如上图右 ...

  8. Spring 4 官方文档学习（十一）Web MVC 框架之HTTP caching support

    一个良好的HTTP缓存策略可以显著地增进web应用的性能和其客户端的体验.主要使用"Cache-Control" HTTP response header来完成,配合conditi ...

  9. quartus使用笔记

    quartus中默认顶层文件名与工程名相同,或自行设置顶层文件:project->set as top-leval entity 顶层模块名要与工程名相同 RTL是编译后的结果,并没有与实际的硬 ...

  10. javascript第四节其它引用对象

    单体对象 Global对象(全局)这个对象不存在,无形的对象 其内部定义了一些方法和属性:encodeURL.encodeURIComponent.decodeURI.decodeURICompone ...