HighCharts学习-柱形图

最新推荐文章于 2018-12-25 18:19:30 发布

凝望_Ing

最新推荐文章于 2018-12-25 18:19:30 发布

阅读量764

点赞数

CC 4.0 BY-SA版权

分类专栏： HighCharts

本文链接：https://blog.youkuaiyun.com/ningwang0206/article/details/26966213

HighCharts 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何使用HighCharts库创建柱状图。博客中包含了一个柱状图的实例，展示了如何设置标题、禁用图表边框、定义X轴和Y轴的属性、添加提示信息以及自定义柱状图的颜色和宽度。此外，还展示了如何添加垂直阈值线和对应的标签，以增强图表的可读性。

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

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
    
            chart: {
                renderTo: 'container',
                type: 'column',
				enabled: false
            },
    
            title: {
                text: 'tittle'
            },
			
			legend: {
				enabled:false // 是否显示折线标题 默认为true
            },
			
            xAxis: {
                categories: ['', '']
            },
    
            yAxis: {
                allowDecimals: false,
				gridLineWidth: 0, //横向网格线宽度  为0时不横向显示网格
                title: {
                    text: ''
                },
				labels:{
					enabled:false //不显示Y轴刻度线
				}
            },
    
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
    
            plotOptions: {
                column: {
                    stacking: 'normal'
                },
				series: {
					pointWidth: 30 //柱子的宽度值 单位为px
				}
            },
    
            series: [{
                name: '1',
                data: [4],
				color:'#DC143C'
            },{
                name: '2',
                data: [4],
                stack: 'male',
				color: 'LightSteelBlue'
            }, {
                name: '3',
                data: [4],
                stack: 'male',
				color: 'Silver'
            }, {
                name: '4',
                data: [4],
                stack: 'male',
				color: 'Gray'
            }],
			credits:{
				enabled: false
			}
        },function(chart) { // on complete
     
			/* 设置折线 */
			chart.renderer.path(['M', 1045, 288, 'L', 1145, 230, 1320, 230])
            .attr({
                'stroke-width': 1,
                stroke: 'gray'
            })
            .add(); 
			
			/* 设置文字显示  文字可以斜着*/
			chart.renderer.text('阈值1', 1290, 227) //设置文字显示 
            .attr({
                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜
            })
            .css({
                color: '#000',
                fontSize: '16px'
            })
            .add();
			
			/* 设置折线 */
			chart.renderer.path(['M', 1045, 190, 'L', 1145, 137, 1320, 137])
            .attr({
                'stroke-width': 1,
                stroke: 'gray'
            })
            .add(); 
			
			/* 设置文字显示  文字可以斜着*/
			chart.renderer.text('阈值2', 1290, 135) //设置文字显示 
            .attr({
                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜
            })
            .css({
                color: '#000',
                fontSize: '16px'
            })
            .add();
			
			/* 设置折线 */
			chart.renderer.path(['M', 1045, 90, 'L', 1145, 45, 1320, 45])
            .attr({
                'stroke-width': 1,
                stroke: 'gray'
            })
            .add(); 
			
			/* 设置文字显示  文字可以斜着*/
			chart.renderer.text('阈值3', 1290, 42) //设置文字显示 
            .attr({
                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜
            })
            .css({
                color: '#000',
                fontSize: '16px'
            })
            .add();
			
			/* 设置左侧折线 */
			chart.renderer.path(['M', 360, 288, 'L', 256, 230, 81, 230])
            .attr({
                'stroke-width': 1,
                stroke: 'gray'
            })
            .add(); 
			
			/* 设置文字显示  文字可以斜着*/
			chart.renderer.text('阈值4', 81, 227) //设置文字显示 
            .attr({
                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜
            })
            .css({
                color: '#000',
                fontSize: '16px'
            })
            .add();
			/* 改变坐标点颜色 */
			/*chart.series[0].points[7].update({
				marker:{
					//enabled: false, //折线上是否显示点
					fillColor: 'grsy', //元素点颜色
					states:{
						select:{
							enabled:false
						},
						hover:{
							enabled:false
						}
					}
				}
			});*/
			/*chart.series[0].points[2].update({
				marker:{
					fillColor: 'grsy'
				}
			});
			chart.series[1].points[2].update({
				marker:{
					fillColor: 'blue'
				}
			});
			chart.series[2].points[2].update({
				marker:{
					fillColor: '#778899'
				}
			});*/
			});
    });
    
});
		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

	</body>
</html>