Highcharts 丟失值區域圖；Highcharts 反轉x軸與y軸；Highcharts 曲線區域圖；Highcharts 區間區域圖；Highcharts 使用區間和線的區域圖

時間  2019-11-11
標籤 highcharts 丟失 區域 反轉 曲線 區間 使用 简体版
原文   原文鏈接

chart 配置

將 chart 的 spacingBottom 屬性設置爲 30。表示圖表間的間隔區間。php

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

實例

文件名：highcharts_area_missing.htmhtml

<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>

jquery

以上實例輸出結果爲：json

 

chart 配置

將 chart 的 inverted 屬性設置爲 true，X軸爲垂直，Y軸爲水平的。app

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

實例

文件名：highcharts_area_inverted.htmssh

<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>

jsonp

以上實例輸出結果爲：ui

 

Highcharts 曲線區域圖

 

chart 配置

將 chart 的 type 屬性設置爲 areaspline，chart.type 描述了圖表類型。默認值爲 "line"。this

var chart = { type: 'areaspline' };

實例

文件名：highcharts_area_spline.htmspa

<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>

以上實例輸出結果爲：

 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程