区域图

区域图

关注
发信
关注(28)粉丝(399)

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

Highcharts 丢失值区域图

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>

尝试一下 »

以上实例输出结果为：

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

Highcharts 反转x轴与y轴

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 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图-LMLPHP

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 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图-LMLPHP

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 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图-LMLPHP

 

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 使用区间和线的区域图-LMLPHP

 
 
 
04-19 16:06
Powered by LMLPHP ©2024 区域图 0.060221