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. spark hive 结合处理 把多行变成多列

    原数据格式 : gid       id      score a1        1       90 a1        2      80 a1       3      79 a1       ...

  2. json 特殊字符 javascript 特殊字符处理(转载)

    特殊字符以前都是禁止页面输入,这样就简单不容易出错,但最近需求要求能输入特殊字符整理出java返回json时特殊字符的转义(不转义会破坏json数据格式导致页面读取数据出错) Java代码 publi ...

  3. LINUX内核分析期末总结

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.课程总结 1 ...

  4. 通过反射向将EF的实体映射配置加入到实体模型中

    public AdminDbContext() : base("MemberDbContext") { //不使用代理创建导航属性,避免WCF序列化错误 Configuration ...

  5. C#使用NPOI导出Excel表格

    using NPOI.HSSF.UserModel;using NPOI.SS.UserModel; /// <summary> /// DataTable导出Excel /// < ...

  6. 关于Datagridview控件用法的一些总结（设置列chicun）

    1. 关于Datagridview控件用法的一些总结:http://www.cnblogs.com/mingjiatang/p/4968049.html

  7. goto

    -------siwuxie095 goto 无条件跳转命令 语法: GOTO label label   指定批处理程序中用作标签的字符串 标签必须单独一行,且以冒号开头.即 goto 和 : 分不 ...

  8. Java web 之表单验证

    按照软件工程师的定位来讲,表单验证应该要好好练习的 html  javascript

  9. as 和 is 区别

    as 将对象转换某类型,如果失败则返回null.is用来判断对象是否为某个类型,在判断过程中会对对象进行两次转换,而as只有一次转换,故as效率高.

  10. LeetCode OJ-- Scramble String ***@

    https://oj.leetcode.com/problems/scramble-string/ 一个字符串的混排变换,简直太妙了,好题 class Solution { public: bool ...