Highcharts(一)简介

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

labels.png

确实需要很久很久,如果你对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>
</head>
<body>
<div class="chart" style="width: 800px ;height: 400px”> //创建一个div用来展示图表
</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>

如果现在看不懂也没关系,放在浏览器里试一试,然后后续我会一一讲解这些属性和用法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容