HighCharts学习小记-折线图

最新推荐文章于 2022-09-16 15:01:32 发布

凝望_Ing

最新推荐文章于 2022-09-16 15:01:32 发布

阅读量673

点赞数

分类专栏： HighCharts

本文链接：https://blog.csdn.net/ningwang0206/article/details/26977977

版权

HighCharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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: 'line',
                //marginRight: 130,
                //marginBottom: 25
            },
            title: {
                text: '趋势',
                x: -20 //center
            },
            subtitle: {
                text: '苹果',
                x: 220
            },
            xAxis: {
                //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                //    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
				min:0,
				max:9, //最大值
				
            },
            yAxis: {
                title: {
                    text: ''
                },
				min:0, //最小开始值
				gridLineWidth: 0, //横向网格线宽度  为0时不横向显示网格
				labels:{
					enabled:false //不显示Y轴刻度线
				},
				//max:140,
				/* 线条 */
                /*plotLines: [{
                    value: 70,
                    width: 1,
					lable: {
						text:'阈值',
						style:{
							color: 'blue',
							align:'right'
						}
					},
                   color: '#808080'
                }],*/
				/* 阈值区域（带颜色区域） */
				plotBands: [{ 
                    from: 0,
                    to: 70,
                    color: 'rgba(68, 170, 213, .2)'
                }]
            },
			/* 点击数据点显示框 */
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                //verticalAlign: 'top',
                //x: -10,
                //y: 100,
                //borderWidth: 0,
				enabled:false // 是否显示折线标题 默认为true
            },
            series: [{
                name: '',
                data: [null, 50, {y:100,color:"green"}/* 提示框颜色 */, 50, {y:100,color:"green"}, 50, {y:100,color:"green"}, 50],
				marker: {
                    fillColor: 'red',
					states:{
						hover:{
							enabled:false
						}
					}
                }
            }],
			credits:{
				enabled: false
			}
        },function(chart) { // on complete
     
			/* 设置折线 */
			chart.renderer.path(['M', 1200, 200, 'L', 1200, 100, 1100, 50, 1100, 100])
            .attr({
                'stroke-width': 1,
                stroke: 'gray'
            })
            .add(); 
			
			/* 设置文字显示  文字可以斜着*/
			chart.renderer.text('阈值', 1300, 190) //设置文字显示 
            .attr({
                rotation: 20 //负数为逆时针倾斜，正数为顺时针倾斜
            })
            .css({
                color: '#000',
                fontSize: '16px'
            })
            .add();
			
			/* 设置文字显示 */
			var text = chart.renderer.text(
                '阈值', 
                1300, 
                230
            ).attr({
                zIndex: 1
            }).add();
        
			/* 改变坐标点颜色 */
			chart.series[0].points[7].update({
				marker:{
					//enabled: false, //折线上是否显示点
					fillColor: 'grsy', //元素点颜色
					states:{
						select:{
							enabled:false
						},
						hover:{
							enabled:false
						}
					}
				}
			});
			if( 2< 1){
			chart.series[0].points[5].update({
				marker:{
					fillColor: 'grsy'
				}
			});
			chart.series[0].points[3].update({
				marker:{
					fillColor: 'grsy'
				}
			});
			chart.series[0].points[1].update({
				marker:{
					fillColor: 'grsy'
				}
			});
			}
		});
    });
    
});
		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>

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

	</body>
</html>

凝望_Ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HighCharts学习小记-折线图

Highcharts Example $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container',
复制链接

扫一扫