对highcharts的总结（饼图、柱状图、折线图、曲线图）

最新推荐文章于 2025-04-14 16:07:32 发布
最新推荐文章于 2025-04-14 16:07:32 发布
阅读量4k 收藏 6
点赞数
分类专栏： myWork--
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/52919303
版权
本文详细介绍了Highcharts库的四种主要图表类型：饼图用于展示部分与整体的关系；曲线图适合展示数据的趋势变化；柱状图则通过条形长度对比不同类别的数据；折线图用于表现数据在时间轴上的变化。通过对这四种图表的理解和应用，可以更好地进行数据可视化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1，饼图

<span style="font-size:18px;"><!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style>
        g.highcharts-grid:nth-child(6) > path {
            stroke-width: 0;
        }
         .highcharts-background{
            fill:transparent !important;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
            $(function () {
                $('#container_1').highcharts({
                chart: {
                    type: 'pie',
					backgroundColor:"#EEF3FA",
					x: -200,
                },
                credits: {
                    enabled: false   //右下角不显示LOGO
                },
                title: {
                    text: '故障次数',
                    style: {
                        color: "#fff",
                    }
                },
                subtitle: {
                    text: '',
                },
                exporting: {//Highcharts 图表导出功能模块。
                    enabled: false
                },
                colors: ['#006FFF', '#2385FF', '#3F93FF', '#66AAFE',
                         '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                legend: { //图例说明是包含图表中数列标志和名称的容器
                    align: 'center',
                    x: 20,
                    y: 20,
                    symbolHeight: 14,//高度
                    symbolWidth: 20,
                    itemStyle: {
                        cursor: 'pointer', color: '#fff'
                    }
                },
              
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true,
                        symbolWidth: 24,
                       
                        point: {
                            events: {
                                legendItemClick: function (e) {
                                    return false; // 直接 return false 即可禁用图例点击事件
                                }
                            }
                        }
                    }
                },
                 
                series: [{
                    data: [
                        ['温度', 10.0],
                        ['湿度', 21.9],
                        ['浸水',28.1],
                        ['烟感',  28.1]
                    ]
                }]
            });
        });
           
    </script>

    <script src="js/highcharts.js"></script>
    <script src="js/info_alert.js"></script>
</head>
<body>
    <div id="container_1" style="width:100%;height:100%; margin: 0 auto;"></div>
  
</body>
</html>
<img src="https://img-blog.youkuaiyun.com/20161025105122259" alt="" /> </span>

2，曲线图：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style>
        g.highcharts-grid:nth-child(6) > path {
            stroke-width: 0;
        }
        .highcharts-legend {
            margin-top: -30px;
        }
        .highcharts-background{
            fill:transparent;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'areaspline',

                },
                title: {
                    text: '',
                },
                subtitle: {
                    text: '',
                },
                exporting: {//Highcharts 图表导出功能模块。
                    enabled: false
                },
                //禁用点击图例隐藏
                plotOptions: {
                    series: {
                        events: {
                            legendItemClick: function (e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    }
                },
                legend: { //图例说明是包含图表中数列标志和名称的容器
                    align: 'center',
                    verticalAlign: 'top',
                    x: 10,
                    y: 20,
                    symbolHeight: 14,//高度
                    symbolWidth: 20,
                    itemDistance:15,
                    point: {
                        events: {
                            legendItemClick: function (e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    },
                    itemStyle: {
                        cursor: 'pointer', color: '#fff'
                    }
                },
                xAxis: {
                    categories: [
                        '00:00',
                        '06:00',
                        '12:00',
                        '16:00',
                        '24:00',
                    ],
                    lineColor: '#fff',
                    lineWidth: '1',
                    tickColor: 'transparent',
                    tickWidth: 1,
                    type:'linear',
                    tickmarkPlacement: 'on',
                    labels: {
                        style: {
                            color: '#fff'
                        }
                    },
                },
                yAxis: {
                    title: {
                        text: 'Fruit units'
                    },
                    lineColor: '#fff',
                    lineWidth: '1',
                    gridLineColor: '#fff',
                    gridLineDashStyle: 'dash',
                    labels: {
                        style: {
                            color: '#fff'
                        }
                    },
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' units'
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    },
                    series: {
                        events: {
                            legendItemClick: function (e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    }
                },
                series: [{
                    name: '温度',
                    data: [3, 4, 3, 5, 4, 10, 12],
                    color: '#fbff00',
                }, {
                    name: '湿度',
                    data: [1, 3, 4, 5, 8, 9, 4],
                    color: '#00ae06',
                }, {
                    name: '浸水',
                    data: [2, 3, 6, 5, 2, 1, 3],
                    color: '#2eb8f2',
                }, {
                    name: '烟感',
                    data: [1, 3, 2, 3, 3, 5, 4],
                    color: '#9501fe',
                }
                ]
            });
        });

    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body style="position:relative;">
    <div id="container" style="width:90%; height:100%; margin: 0 auto">
    </div>
</body>
</html>

3，柱状图：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <link rel="stylesheet" type="text/css" href="css/column_diagram.css" />
    <link rel="stylesheet" type="text/css" href="css/info_report.css" />
    <style>
        g.highcharts-grid:nth-child(6) > path {
            stroke-width: 0;
        }
        .highcharts-legend {
            margin-top: -30px;
        }
    </style>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',    //指定图表的类型，默认是折线图（line）
        },
        credits: {
            enabled: false   //右下角不显示LOGO
        },
        title: {
            text: '',
        },
        subtitle: {
            text: '',
        },
        exporting: {//Highcharts 图表导出功能模块。
            enabled: false
        },
        plotOptions: {
            column: {
                stacking: 'percent',
				pointWidth:35
            },
         series:{
                allowPointSelect:false,
                animation:false,
                events:{
					legendItemClick:function(event){
                    return false; //return  true 则表示允许切换
                         }
                     }
            }
        },
        xAxis: {
            title: {
                text: '保存时间',
                align: 'high',
                rotation: 0,
            },
            categories: ['LT04', 'LT05', 'LT06'],
            labels: {
                align: 'center',
            },
            lineColor: '#000000',
            lineWidth: '2',
            tickColor: '#000000',
            tickWidth: 1,
            type: 'linear',
            tickmarkPlacement: 'on',
        },
        yAxis: {
            title: {
                align: 'high',
                offset: 0,
                text: '数量',
                rotation: 0,
                y: -25
            },
           labels:{step:1},
            plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
                value: 0,
                width: 1,
                color: '#808080'
            }],
            lineColor: 'black',
            lineWidth: '2',
        },
        legend: { //图例说明是包含图表中数列标志和名称的容器
            align: 'center',
            verticalAlign: 'top',
            x: 20,
            y: 10,
            symbolHeight: 14,//高度
            symbolWidth:14
        },
        //禁用点击图例隐藏
        series: [{
            name: '高危',
            data: [5, 3, 4],
            color: '#E2214E',
        }, {
            name: '危险',
            data: [2, 7, 3],
            color: '#F7B52B'
        }, {
            name: '只读',
            data: [3, 4, 4],
            color: '#0749C3'
        },{
            name: '健康',
            data: [3, 4, 4],
            color: '#66FE17'
        }
    ]});
});
    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body style="position:relative;">
    <div id="container" style="width:90%; height:230px; margin: 0 auto">
    </div>
</body>
</html>

4，折线图：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <link rel="stylesheet" type="text/css" href="css/info_report.css" />
    <link rel="stylesheet" type="text/css" href="css/broken_line.css" />
	<style>
		g.highcharts-grid:nth-child(6) > path{
			stroke-width:0;
		}
        #container{
             width:100%;
        }
        .highcharts-background{
            width:100%;
        }
      .highcharts-series-group{
          margin-top:-100px;
      }
      
     g.highcharts-axis{
         margin-top:-10%;
     }
     g.highcharts-axis:nth-child(7) > path:nth-child(1){
         margin-top:-10%;
     }
	</style>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',    //指定图表的类型，默认是折线图（line）
        },
        credits: {            
            enabled: false   //右下角不显示LOGO        
        },
        title: {
            text: '',
        },
        subtitle: {
            text: '',
        },
        exporting: {//Highcharts 图表导出功能模块。
            enabled: false
        },
        xAxis: {
            title: {
                text: '保存时间',
                align: 'high',
                rotation: 0,
                x:10,
                y:0,
            },
            categories: ['1年', '2年', '3年', '4年', '5年', '6年','7年'],
            labels: {
                align: 'center',
            },
            lineColor: '#000000',
            lineWidth: '2',
            tickColor: '#000000',
            tickWidth: 1,
            type: 'linear',
            tickmarkPlacement: 'on',
            
           
        },
        yAxis: {
            title: {
                align: 'high',
                offset: 0,
                text: '数量',
                rotation: 0,
                y: -25,
            },
            plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
                value: 0,
                width: 1,
                color: '#808080'
            }],
            lineColor: 'black',
            lineWidth: '2',
            max:100
        },
      
        legend: { //图例说明是包含图表中数列标志和名称的容器
            align: 'center',
            verticalAlign: 'top',
            x: 30,
            y: 10,//修改距离上面的高度
        },
        //禁用点击图例隐藏
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function(e) {
                        return false; // 直接 return false 即可禁用图例点击事件
                    }
                }
            }
        } ,
        series: [{
            name: '高危',
            color: '#E1204E',
            data: [20.0, 20.0, 41.2, 30.4, 50.2, 14.0, 10.0],
        }, {
            name: '危险',
            color: '#F8B52A',
            data: [15.6, 30.9, 10.5, 20.5, 37.0, 38.0, 45.0]
        }, {
            name: '只读',
            color: '#0749C3',
            data: [50.1, 10.6, 43.5, 38.4, 13.5, 37.0, 50.0]
        }, {
            name: '健康',
            color: '#7CFF06',
            data: [33.9, 24.2, 15.7, 23.5, 20.9, 35.2, 47.0]
        },
    ]});
});
    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body>
    <div id="container" style="width:90%; height:230px; margin: 0 auto">
    </div>
    
</body>
</html>


highcharts 下钻 多个series 三级 四级 多级 多种图例 柱状图 饼状图 折线图
02-22
解决highcharts多级下钻问题，下钻过程中使用了多种图例，自带上钻功能 c#，java使用方法一样，demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻http://download.youkuaiyun.com/detail/ioricnn/9760509
新手学HighCharts（二）----对比柱状图的动态加载
weixin_34128501的博客
01-09 283
highcharts数据显示形式 后台 B层实现层 Controller层 前台 JSP JavaScript 上一篇文章 新手学HighCharts（一）—-基本使用 中介绍了highCharts的基本使用，今天给大家介绍对比柱状图的使用，贴张图先： highcharts数据显示形式 ...
Highcharts Grid Crack,Handle Large Datasets with a Fast
最新发布
q2315702359的博客
04-14 434
　　Highcharts Grid delivers smooth, high-performance rendering of massive data volumes through intelligent row virtualization.　　Highcharts Grid is a feature-rich data grid component developed by Highsoft, designed for use within Highcharts Dashboards (Highc
Highcharts实现下钻多柱series
guang_sszbs的博客
05-27 469
Highcharts实现下钻动态添加多个series
Java和Highcharts实现折线图
05-15
Java和Highcharts结合实现折线图
highCharts 折线图展示数据点（marker）
yqw666的博客
09-16 1778
highcharts 折线图 折点 展示
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
12-10
HighCharts是一款基于JavaScript的图表库，它可以用于创建各种类型的交互式图表，如柱状图、折线图、饼图等。在本实例中，我们将详细探讨如何使用jQuery插件HighCharts来绘制2D柱状图、折线图和饼图的组合图。这将...
HighCharts实现饼图与柱状图绘制教程
Highcharts是一款非常流行的基于Web的图表库，它可以用来创建交互式的图表，并且拥有多种图表类型，例如：折线图、柱状图、饼图等。本文将详细介绍如何使用Highcharts来绘制饼图和柱状图。 ### Highcharts基础 ...
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
10-20
HighCharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的图表，包括柱状图、折线图、饼图等。在本示例中，我们关注的是如何使用jQuery和HighCharts插件来绘制2D柱状图和折线图的组合双轴图。这种...
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
12-09
HighCharts是一款基于JavaScript的图表库，它允许开发者创建各种类型的图表，如柱状图、折线图、饼图等，并且可以实现丰富的交互效果。在本文中，我们将深入探讨如何使用jQuery插件HighCharts实现2D柱状图与折线图的...
highcharts 怎么画网格
Littlegirlha的博客
01-28 382
xAxis,yAxis,这里画网格，tickPositions是一组数，表示坐标轴刻度，超过这个刻度的值不展示，可以通过 gridLineColor,gridLineWidth设置颜色。此例为红色。 当这个刻度太大时，想要用次坐标值做网格，可以设置minorTickInterval,默认auto即1/5。用minorGridLineColor,minorGridLineWidth等设置样式。
highcharts 多级 下钻 多个series 三级 异步 大数据下钻 多个图例
02-22
解决highcharts多级下钻问题，下钻过程中使用了多种图例，自带上钻功能 c#，java使用方法一样，demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据下钻可使用异步加载提升性能
highcharts 显示网格
weixin_33966365的博客
06-20 1389
2019独角兽企业重金招聘Python工程师标准>>> ...
HighCharts学习笔记（一）
weixin_33739627的博客
02-18 357
HighChars基本概述 Highcharts是一个纯js写成的插件库，很好的外观表现可以满足任何图标需求。 开始使用chart之前进行配置 全局配置： Highcharts.setOptions({ global: { useUTC: false }}); 主配置中参数含义： $("#container").highcharts({ accessibility:无障碍的...
HighCharts（2）坐标轴5部分
zouk‘s blogs
08-21 1690
先看一张图，有个预先认知：1、坐标轴标题 没什么好说的，就不在这儿浪费时间了，自己看看文档OK的。2、坐标轴刻度标签 Labels常用属性有enabled、formatter、step、staggerLines2.1）enabled是否启用Labels 标签，x和y轴默认值都是true。2.2）Formatter标签格式化函数。可以自定义坐标轴标签的格式，y轴默认是当前值this.value，当
highcharts报表开发 一：chart配置
qq_28468379的博客
10-23 321
$("#container").highcharts({ chart : { // 图表背景颜色配置 backgroundColor: '#FCFFC5', // 图表背景渐变颜色 backgroundColor: {
Highcharts实现饼图pie
jianghaha2011的博客
04-22 622
上图类似 chartPie_market: function (docm) { let pieData = []; let slef = this; slef.MainCount.listY.forEach(function (item, index) { let op = { name: slef.Ma...
HighCharts学习-柱形图
ningwang0206的专栏
05-25 761
Highcharts Example $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container',
快速上手highcharts
qq_44514860的博客
09-04 1851
引入 Highcharts Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是： 创建一个简单的图表 在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小 然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下： 第一个 Highcharts 图表
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值