点击查看济南黑马校区最新开班计划

【济南校区】higtcharts的使用过程

1.基础的使用（CDN）
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
2.功能模块
在下载的资源包中modules目录下找到
更多图表类型扩展模块（highcharts-more.js）3D 图表模块 （highcharts-3d.js）导出功能模块（modules/exporting.js）金字塔图表类型（modules/funnel.js）钻取功能模块（modules/drilldown.js）数据加载功能模块（modules/data.js）

1 2 3 4 5

例如启用导出功能时需要引入的文件及顺序是： <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

　3.highstock和highmaps

• Highcharts 基础图表
• Highstock 股票及大数据量时间轴图表
• Highmaps 地图
  

  Highstock是完全包含Highcharts的。是在Highcharts的基础上增加更多高级功能；
  Highmaps则是完全独立的.
    混合使用（重要）


A. Highcharts + Highstock 时只需要引入 highstock.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> B. Highcharts + Highmaps 混合使用是需要 引入 highcharts.js + map.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script> C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> <script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>


4.主题
  在 theme目录下。
给图表加上灰色（Gray）主题时需要引用的文件如下：
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>

【黑马程序员济南】小鲁哥哥全学科技术整合帖（一贴在手！天下我有！）

如果你想了解更多黑马课程，如果你想加入黑马这个大家庭学习先进技术，光交天下好友，那就快来吧！
     黑马程序员济南中心联系电话：0531-55696830

点击查看济南黑马校区最新开班计划

【济南校区】higtcharts的使用过程

1.基础的使用（CDN）
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
2.功能模块
在下载的资源包中modules目录下找到
更多图表类型扩展模块（highcharts-more.js）3D 图表模块 （highcharts-3d.js）导出功能模块（modules/exporting.js）金字塔图表类型（modules/funnel.js）钻取功能模块（modules/drilldown.js）数据加载功能模块（modules/data.js）

1 2 3 4 5

例如启用导出功能时需要引入的文件及顺序是： <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

　3.highstock和highmaps

• Highcharts 基础图表
• Highstock 股票及大数据量时间轴图表
• Highmaps 地图
  

  Highstock是完全包含Highcharts的。是在Highcharts的基础上增加更多高级功能；
  Highmaps则是完全独立的.
    混合使用（重要）


A. Highcharts + Highstock 时只需要引入 highstock.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> B. Highcharts + Highmaps 混合使用是需要 引入 highcharts.js + map.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script> C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> <script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>


4.主题
  在 theme目录下。
给图表加上灰色（Gray）主题时需要引用的文件如下：
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>

【黑马程序员济南】小鲁哥哥全学科技术整合帖（一贴在手！天下我有！）

如果你想了解更多黑马课程，如果你想加入黑马这个大家庭学习先进技术，光交天下好友，那就快来吧！
     黑马程序员济南中心联系电话：0531-55696830