highcharts实现多色带折线图

最新推荐文章于 2024-07-10 11:20:43 发布

cas_nj

最新推荐文章于 2024-07-10 11:20:43 发布

阅读量1.7k

点赞数 2

分类专栏：工作问题记录文章标签：前端 highcharts 多色带多颜色折线

本文链接：https://blog.csdn.net/cas_nj/article/details/78955042

版权

工作问题记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前项目中使用highchart绘制了几个统计图，搜寻了许久才找到多色带的实现方式，故做此分享，供大家参考。

实现的效果图如下：

代码：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8"> 
	<title>Document</title>
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	 <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 1000px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {

 var chart = {
            plotBackgroundColor: {
                //linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
                //color:[]
            },
            panning: true,
            type: 'line'
        }
	  var title = {
      text: null  
   };
   /*var subtitle = {
        text: 'Source: runoob.com'
   };*/
   var xAxis = {
       categories: ['201701', '201702', '201703', '201704', '201705', '201706'
              ,'201707', '201708', '201709', '201710', '201711', '201712'],
       labels: {
        rotation: 0
    	} //设置x轴倾斜角度
   };
   var yAxis = {
   	//设置样式
      className: 'highcharts-color-1',
      //隔行显示不同的颜色
      //alternateGridColor: '#FDFFD5',
      title: {
         text: 'Temperature (\xB0C)'
      },
      gridLineWidth:'0px',
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080',
      }],
      //设置分辨带，沿y轴显示不同颜色
       plotBands:[
                {
                    from:30,
                    to:25,
                    color:'#f4f4f4',
                    label:{
                        //text: 'level1',
                        style:{color:'#808080'}
                    }
                },
                {
                    from:25,
                    to:20,
                    color: '#e7f7e9',
                    label:{
                       // text: 'level2',
                        style:{color:'#606060'}
                    }
                },
                {
                    from:20,
                    to:15,
                    color:'#f1f8ff',
                    label:{
                       // text:'level3',
                        style:{color:'#ccc'}
                    }
                },
                {
                    from:15,
                    to:10,
                    color:'#fff7f2',
                    label:{
                        //text:'level4',
                        style:{color:'#fff'}
                    }
                },
                {
                    from:10,
                    to:5,
                    color:'#Ffeff0',
                    label:{
                       // text:'level5',
                        style:{color:'#ff3300'}
                    }
                }
            ]

   };   

   var tooltip = {
      valueSuffix: '\xB0C'
   }
   //图例设置
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0,
      enabled: false   
   };
   //增加访问链接设置
    var credits = {
            	text: 'Example.com',
            	enabled:false
            	//href: 'http://www.example.com'
        	}
      //数据点配置设置
     var plotOptions = {
            series: {
                marker: {
                    enabled: false, /*数据点是否显示*/
                    //radius: 5,  /*数据点大小px*/
                    //fillColor:'#ff3300'         /*数据点颜色*/
                },
               
                
            }
        }
   var series =  [
      {
         name: '策略评分',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6],
            zones: [{
                      value: 10,
                     color: '#f7a35c',
                    //dashStyle: 'dot'
                 }, {
                    value: 20,
                    color: '#7cb5ec'
                },{
                  color: '#90ed7d'
                 }]
      }
   ];

   var json = {};
   json.chart = chart;
   json.title = title;
   //json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
   json.credits = credits;
   json.plotOptions = plotOptions;
  // json.scrollbar =scrollbar;
   json.navigator = navigator;
   //json.rangeSelector = rangeSelector;

   $('#container').highcharts(json);
     
});
</script>
	
</body>
</html>