【Web】前端Highcharts各种图形示例

沙振宇

已于 2023-12-19 16:14:40 修改

阅读量1.7w

点赞数 3

分类专栏： Web 文章标签： Highcharts 隐藏Highcharts.com图标折线图柱形图图

于 2019-04-03 17:15:43 首次发布

本文链接：https://blog.csdn.net/u014597198/article/details/89000350

版权

Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

1、简介
2、折线图——效果图
3、折线图——示例代码
4、柱形图——效果图
5、柱形图——示例代码
6、面积图——效果图
7、面积图——示例代码
8、其它的各种图
9、注：隐藏Highcharts.com图标

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>