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. 在C#中创建和读取XML文件

    1.创建简单的XML文件 为了便于测试,我们首先创建控制台应用程序,项目命名为CreateXml,Program.cs代码如下: 这样会在C盘根目录下创建data2.xml文件,文件内容为 using ...

  2. delphi项目中的modelsupport文件夹

    delphi项目中的modelsupport文件夹 今天写着写着突然发现多了一个这个文件夹..苦思不得其解  看着又难受  删了又重建 终于找到了  存此备查;Tools--option--toget ...

  3. Selenium2+python自动化14-iframe

    前言 有很多小伙伴在拿163作为登录案例的时候,发现不管怎么定位都无法定位到,到底是什么鬼呢,本篇详细介绍iframe相关的切换 以http://mail.163.com/登录页面10为案例,详细介绍 ...

  4. Python-Windows下安装BeautifulSoup和requests第三方模块

    http://blog.csdn.net/yannanxiu/article/details/50432498 首先给出官网地址: 1.Request官网 2.BeautifulSoup官网 我下载的 ...

  5. 利用ASP.NET加密和解密Web.config中连接字符串

    摘自:博客园 介绍 这篇文章我将介绍如何利用ASP.NET来加密和解密Web.config中连接字符串 背景描述 在以前的博客中,我写了许多关于介绍 Asp.net, Gridview, SQL Se ...

  6. RVM 实用指南

    rvm是一个命令行工具,可以提供一个便捷的多版本ruby环境的管理和切换. https://rvm.io/ 如果你打算学习ruby/rails, rvm是必不可少的工具之一. 这里所有的命令都是再用户 ...

  7. C# 基础（5）--字符串

    Params 可变参数,只能修饰数组,可以传递数组,也可以传递数组的元素. 要抛弃一个异常,可以这样写: Throe new exeception?? 命名空间 不在同一个命名空间下的类,不同直接访问 ...

  8. 让linux中的程序崩溃时生成core文件

    当我们的linux程序崩溃的时候,常常会有这样的提示:    Segmentation fault (core dumped)    段错误 (核心已转储)    提示说生成了core文件,但是此功能 ...

  9. 取得ascii的例子

    取得ascii的例子:    String abc = "hello world";    int m = abc.c_str()[0];    ShowMessage(m); i ...

  10. MySQL数据库小实验

    实验1 1.创建数据表 CREATE TABLE guest( Accounts ) NOT NULL, Details ) NOT NULL, Date ) NOT NULL, ,), Class ...