Highcharts入门之简介

Z时代
2024-01-10
分类：综合

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

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

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

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

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

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

下面给一个简单的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.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/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>