主页 / 网络编程 /

Highcharts入门之简介

网络编程 2021-07-04 20:00www.168986.cn编程入门
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。狼蚁网站SEO优化通过本文的介绍及实例一起来学习学习吧。

在网页中创建一个这样的图表，你觉得会要多久？

确实需要很久很久，如果你对JavaScript不是特别熟练的话。

有个好消息就是如果，你使用Highcharts框架的话，可能十多行代码就能让你在页面中生成这样有特效的图表。

他的功能远不止这些，各种图表，打印，导出，对比分析。

他不仅仅可以用来做网站的图表分析，就是在有什么演示的时候用这个做出来的东西想必也是让人眼前一亮吧，完全就可以抛弃PPT了啊。

所以赶紧来了解如何使用他吧！！！

狼蚁网站SEO优化给一个简单的Dome

    1.在highcharts中属性以逗号隔开

    2.一个大的属性中使用{}，在{}中填写具体的属性

    3.除了数据其他的属性一般使用”"包含

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="http://cdn.hcharts./jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts./highcharts/highcharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="chart" style="width: 800px ;height: 400px"> 
</div>
<script>
  $(function () {
    $(".chart").highcharts({  //指定在class为chart的地方创建图表
      chart:{
        type:'line'   //图表的类型，还有column等
      },
      title:{
        text:'Dome01'  //图表的标题
      },
      xAxis:{
        categories:['A','B','C','D']  //x坐标的分组
      },
      yAxis:{
        title:{
          text:'some'   //y坐标的标题
        }
      },
      series:[{
        name:'zhangsan',  //数据的名称
        data:[2,3,5,3]   //具体的数据
      },{
        name:'lisi',
        data:[3,5,1,3]
      },{
        name:'wangwu',
        data:[1,4,6,2]
      }]
    }) ;
  });
</script>
</body>
</html>

如果现在看不懂也没关系，可以放在浏览器里试一试，后续我还会更新Highcharts的相关文章，感兴趣的朋友们可以继续支持狼蚁SEO。

上一篇：js检查是否关闭浏览器的方法 下一篇：jQuery 获取页面li数组并删除不在数组中的key

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by