前端学习 之 Highcharts各种图形 示例

1、简介

最近项目的需要,看了下前端的框架。想要在Web网页上,做折线图,柱形图等。查了一些开源的项目,发现Highcharts框架还是很好用,于是做了一个小示例,供大家共同学习。

Highcharts的官网:https://www.highcharts.com/
Highcharts的官网的api文档:https://api.hcharts.cn/
Highcharts是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。

2、折线图——效果图

做了一个简单的折线图的示例:
在这里插入图片描述

3、折线图——示例代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Highcharts小示例--沙师弟专栏</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };
                var title = { text: '用户量基本情况' };
                var subtitle = { text: 'Basic Situation of Outbound Call User Volume' };
                var tooltip = { valueSuffix: '个' };
                var yAxis = { title: { text: '用户量' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] };
                var xAxis = { categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',
                     '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']};
                var series =  [
                    {
                     name: '德邦',
                     data: [0,0,0,0,0,45,1,3,6,1,3,5,1,45,4,6,76,1,3,5,7,7,12,4]
                    },
                    {
                     name: '华润',
                     data: [0,0,0,0,0,4,13,31,63,12,33,45,11,4,4,46,6,31,31,0,0,0,0,0]
                    },
                    {
                     name: '电信',
                     data: [10,20,40,20,10,6,3,3,6,102,133,145,211,124,214,146,26,31,31,10,20,10,30,40]
                    },
                ]; 
                var chart = {};
                var json = {};
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.legend = legend; 
                json.chart = chart;
                json.series = series;
                $('#container').highcharts(json);
            });
        </script>
    </body>
</html>

4、柱形图——效果图

在这里插入图片描述

5、柱形图——示例代码

变成柱形图的代码非常简单,只需要修改它的chart属性type为column值即可。
在这里插入图片描述

6、面积图——效果图

在这里插入图片描述

7、面积图——示例代码

和柱形图的代码差不多,面积图需要修改它的chart属性type为area值即可。
在这里插入图片描述

8、其它的各种图

在这里插入图片描述
可参考官网:https://www.highcharts.com.cn/demo/highcharts/bubble-3d
在这里插入图片描述
可参考官网:https://www.highcharts.com.cn/demo/highcharts/scatter-boost

9、注:隐藏Highcharts.com图标

在这里插入图片描述
默认的Highcharts是会显示图标的,而且图标可以链接到它的官网上,我们需要隐藏掉图标:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值