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. spring结合Quartz的集群功能实现

    一:前沿 在上一篇(http://www.cnblogs.com/wuhao1991/p/4331613.html)的博客中记载了定时的功能,但是集成是没有成功的,在这篇中,我在解释下这里的”集成的含 ...

  2. SpringBean

    springBean  <bean id="user" class="..."/> 默认是单例的. 如果要改成多例的则<bean id=&qu ...

  3. sendEmail的使用

    坑!坑!坑!今天又弄了一天如何发送邮件,首先用sendmail,postfix.....等,都试过了,各种报错,然后就从早上弄到现在,在群里问问题的时候,一位好心的大哥说了他用的是sendEmail, ...

  4. 从 Eclipse 导入项目到 Android Studio

    ADT已经有些过时了,现在比较流行的安卓开发工具是Android Studio,毕竟是谷歌一直在推广的. 最近装了as,从之前的adt迁移项目到as上,遇到了不少坎. 主要注意以下两点: (1)文件路 ...

  5. 如何编译Less

    什么是LESS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种.它编译后就是CSS了,大名鼎鼎的前端框架BootStrap就是用这个语言写的 下面示范下怎么用LESS编译成CSS,尽量简 ...

  6. Hibernate个人学习笔记(1)

    连接池c3p0所需jar包:Hiberbate开发包-lib-optional-c3p0下全部Jar包 Hiberbate连接池参数配置:Hiberbate开发包-project-etc-hibern ...

  7. Azure china服务状态报告查看网址

    https://www.azure.cn/support/service-dashboard/

  8. 第七次课：ssh的集成(SpringMV+Spring+Hibernate)

    第一部分:程序结构 第二部分:配置 1.配置web.xml文件,启动spring和springMVC: 1)配置启动spring: <context-param> <param-na ...

  9. Yii中事件触发机制

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

  10. 解决VMware下安装Ubuntu15不支持1920X1080分辨率的问题

    解决步骤如下: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync ...