对highcharts的总结(饼图、柱状图、折线图、曲线图)

本文详细介绍了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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值