码迷，mamicode.com
首页 > 其他好文 > 详细

Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

时间：2017-11-28 14:19:56      阅读：227      评论：0      收藏：0      [点我收藏+]

标签：bottom   div   chart   分享   sda   oom   shared   its   rri   

chart 配置

将 chart 的 spacingBottom 属性设置为 30。表示图表间的间隔区间。

var chart = {
   type: ‘area‘,
   spacingBottom: 30
};

实例

文件名：highcharts_area_missing.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: ‘area‘,
      spacingBottom: 30
   };
   var title = {
      text: ‘Fruit consumption *‘   
   }; 
   var subtitle = {
      text: ‘* Jane\‘s banana consumption is unknown‘,
      floating: true,
      align: ‘right‘,
      verticalAlign: ‘bottom‘,
      y: 15
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Apples‘, ‘Pears‘, ‘Oranges‘, ‘Bananas‘, ‘Grapes‘, ‘Plums‘, ‘Strawberries‘, ‘Raspberries‘]      
   };
   var yAxis = {
      title: {
         text: ‘Y-Axis‘
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      }
   };
   var tooltip = {
      formatter: function () {
         return ‘<b>‘ + this.series.name + ‘</b><br/>‘ +
            this.x + ‘: ‘ + this.y;
      }
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: ‘John‘,
            data: [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            name: ‘Jane‘,
            data: [1, 0, 3, null, 3, 1, 2, 1]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);});</script></body></html>

以上实例输出结果为：

技术分享图片

 

chart 配置

将 chart 的 inverted 属性设置为 true，X轴为垂直，Y轴为水平的。

var chart = {
   type: ‘area‘,
   inverted: true
};

实例

文件名：highcharts_area_inverted.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: ‘area‘,
     inverted: true
   };
   var title = {
      text: ‘Average fruit consumption during one week‘   
   }; 
   var subtitle = {
      style: {
         position: ‘absolute‘,
         right: ‘0px‘,
         bottom: ‘10px‘
      }
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: -150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Monday‘,‘Tuesday‘,‘Wednesday‘,‘Thursday‘,‘Friday‘,‘Saturday‘,‘Sunday‘]      
   };
   var yAxis = {
      title: {
         text: ‘Number of units‘
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      },
     min: 0
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: ‘John‘,
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: ‘Jane‘,
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;   
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 技术分享图片

Highcharts 曲线区域图

 

chart 配置

将 chart 的 type 属性设置为 areaspline，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘areaspline‘  
};

实例

文件名：highcharts_area_spline.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: ‘areaspline‘     
   };
   var title = {
      text: ‘Average fruit consumption during one week‘   
   }; 
   var subtitle = {
      style: {
         position: ‘absolute‘,
         right: ‘0px‘,
         bottom: ‘10px‘
      }
   };
   var legend = {
      layout: ‘vertical‘,
      align: ‘left‘,
      verticalAlign: ‘top‘,
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
   };
   var xAxis = {
      categories: [‘Monday‘,‘Tuesday‘,‘Wednesday‘,‘Thursday‘,‘Friday‘,‘Saturday‘,‘Sunday‘]      
   };
   var yAxis = {
      title: {
         text: ‘Fruit units‘
      }      
   };
   var tooltip = {
       shared: true,
       valueSuffix: ‘ units‘
   };
   var credits = {
       enabled: false
   }
   var plotOptions = {
      areaspline: {
         fillOpacity: 0.5
      }
   };   
   var series= [{
        name: ‘John‘,
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: ‘Jane‘,
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;   
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(‘#container‘).highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

技术分享图片

 

Highcharts 区间区域图

 

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘arearange‘  
};

实例

文件名：highcharts_area_range.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>   
   <script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: ‘arearange‘,
      zoomType: ‘x‘   
   };
   var title = {
      text: ‘Temperature variation by day‘   
   };    
   var xAxis = {
      type: ‘datetime‘     
   };
   var yAxis = {
      title: {
         text: null
      }      
   };
   var tooltip = {
       shared: true,
     crosshairs: true,
       valueSuffix: ‘\xB0C‘
   };
   var legend = {
       enabled: false
   }    
      
   var json = {};   
   json.chart = chart; 
   json.title = title;    
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;     
   
   $.getJSON(‘http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?‘, function (data) {
      var series= [{
         name: ‘Temperatures‘,
         data: data
         }
      ];     
    json.series = series;
    $(‘#container‘).highcharts(json);
   });    
});
</script>
</body>
</html>

以上实例输出结果为：

技术分享图片

 

 

 

Highcharts 使用区间和线的区域图

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: ‘arearange‘  
};

实例

文件名：highcharts_area_rangeline.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
    var ranges = [
      [1246406400000, 14.3, 27.7],
      [1246492800000, 14.5, 27.8],
      [1246579200000, 15.5, 29.6],
      [1246665600000, 16.7, 30.7],
      [1246752000000, 16.5, 25.0],
      [1246838400000, 17.8, 25.7],
      [1246924800000, 13.5, 24.8],
      [1247011200000, 10.5, 21.4],
      [1247097600000, 9.2, 23.8],
      [1247184000000, 11.6, 21.8],
      [1247270400000, 10.7, 23.7],
      [1247356800000, 11.0, 23.3],
      [1247443200000, 11.6, 23.7],
      [1247529600000, 11.8, 20.7],
      [1247616000000, 12.6, 22.4],
      [1247702400000, 13.6, 19.6],
      [1247788800000, 11.4, 22.6],
      [1247875200000, 13.2, 25.0],
      [1247961600000, 14.2, 21.6],
      [1248048000000, 13.1, 17.1],
      [1248134400000, 12.2, 15.5],
      [1248220800000, 12.0, 20.8],
      [1248307200000, 12.0, 17.1],
      [1248393600000, 12.7, 18.3],
      [1248480000000, 12.4, 19.4],
      [1248566400000, 12.6, 19.9],
      [1248652800000, 11.9, 20.2],
      [1248739200000, 11.0, 19.3],
      [1248825600000, 10.8, 17.8],
      [1248912000000, 11.8, 18.5],
      [1248998400000, 10.8, 16.1]
   ];
   var averages = [
      [1246406400000, 21.5],
      [1246492800000, 22.1],
      [1246579200000, 23],
      [1246665600000, 23.8],
      [1246752000000, 21.4],
      [1246838400000, 21.3],
      [1246924800000, 18.3],
      [1247011200000, 15.4],
      [1247097600000, 16.4],
      [1247184000000, 17.7],
      [1247270400000, 17.5],
      [1247356800000, 17.6],
      [1247443200000, 17.7],
      [1247529600000, 16.8],[1247616000000,17.7],[1247702400000,16.3],[1247788800000,17.8],[1247875200000,18.1],[1247961600000,17.2],[1248048000000,14.4],[1248134400000,13.7],[1248220800000,15.7],[1248307200000,14.6],[1248393600000,15.3],[1248480000000,15.3],[1248566400000,15.8],[1248652800000,15.2],[1248739200000,14.8],[1248825600000,14.4],[1248912000000,15],[1248998400000,13.6]];var title ={
      text:‘July temperatures‘};var xAxis ={
      type:‘datetime‘};var yAxis ={
      title:{
         text:null}};var tooltip ={
       shared:true,
      crosshairs:true,
       valueSuffix:‘\xB0C‘};var legend ={}var series=[{
        name:‘Temperature‘,
            data: averages,
            zIndex:1,
            marker:{
                fillColor:‘white‘,
                lineWidth:2,
                lineColor:Highcharts.getOptions().colors[0]}},{
            name:‘Range‘,
            data: ranges,
            type:‘arearange‘,
            lineWidth:0,
            linkedTo:‘:previous‘,
            color:Highcharts.getOptions().colors[0],
            fillOpacity:0.3,
            zIndex:0}];var json ={};   
   json.title = title;    
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;     
   json.series = series;
   $(‘#container‘).highcharts(json);});</script></body></html>

以上实例输出结果为：

 技术分享图片

 

 
 

Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

标签：bottom   div   chart   分享   sda   oom   shared   its   rri   

原文地址：http://www.cnblogs.com/xuaijun/p/7909362.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！