Highcharts 标示区曲线图；Highcharts 对数图表；Highcharts 时间间隔图表

Posted xuaijun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Highcharts 标示区曲线图；Highcharts 对数图表；Highcharts 时间间隔图表相关的知识，希望对你有一定的参考价值。

Highcharts 标示区曲线图

 

配置

使用 yAxis.plotBands 属性来配置标示区。区间范围使用 \'from\' 和 \'to\' 属性。颜色设置使用 \'color\' 属性。标签样式使用 \'label\' 属性。

配置信息：

var yAxis = {
   title: {
      text: \'Wind speed (m/s)\'
   },
   min: 0,
   minorGridLineWidth: 0,
   gridLineWidth: 0,
   alternateGridColor: null,
   plotBands: [{ // Light air
      from: 0.3,
      to: 1.5,
      color: \'rgba(68, 170, 213, 0.1)\',
      label: {
         text: \'Light air\',
         style: {
            color: \'#606060\'
         }
      }
   }, { // Light breeze
      from: 1.5,
      to: 3.3,
      color: \'rgba(0, 0, 0, 0)\',
      label: {
         text: \'Light breeze\',
         style: {
            color: \'#606060\'
         }
      }
   }, { // Gentle breeze
      from: 3.3,
      to: 5.5,
      color: \'rgba(68, 170, 213, 0.1)\',
      label: {
         text: \'Gentle breeze\',
         style: {
            color: \'#606060\'
         }   
      }
   }, { // Moderate breeze
      from: 5.5,
      to: 8,
      color: \'rgba(0, 0, 0, 0)\',
      label: {
         text: \'Moderate breeze\',
         style: {
            color: \'#606060\'
         }
      }
   }, { // Fresh breeze
      from: 8,
      to: 11,
      color: \'rgba(68, 170, 213, 0.1)\',
      label: {
         text: \'Fresh breeze\',
         style: {
            color: \'#606060\'
         }
      }
   }, { // Strong breeze
      from: 11,
      to: 14,
      color: \'rgba(0, 0, 0, 0)\',
      label: {
         text: \'Strong breeze\',
         style: {
            color: \'#606060\'
         }
      }   
   }, { // High wind
      from: 14,
      to: 15,
      color: \'rgba(68, 170, 213, 0.1)\',
      label: {
         text: \'High wind\',
         style: {
            color: \'#606060\'
         }
      }
   }]
};

实例

文件名：highcharts_spline_bands.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: \'spline\'      
   }; 
   var title = {
      text: \'Wind speed during two days\'   
   };
   var subtitle = {
      text: \'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway\'
   };
   var xAxis = {
      type: \'datetime\',
      labels: {
         overflow: \'justify\'
      }
   };
   var yAxis = {
      title: {
         text: \'Wind speed (m/s)\'
      },
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null,
      plotBands: [{ // Light air
         from: 0.3,
         to: 1.5,
         color: \'rgba(68, 170, 213, 0.1)\',
         label: {
            text: \'Light air\',
            style: {
               color: \'#606060\'
            }
         }
      }, { // Light breeze
         from: 1.5,
         to: 3.3,
         color: \'rgba(0, 0, 0, 0)\',
         label: {
            text: \'Light breeze\',
            style: {
               color: \'#606060\'
            }
         }
      }, { // Gentle breeze
         from: 3.3,
         to: 5.5,
         color: \'rgba(68, 170, 213, 0.1)\',
         label: {
            text: \'Gentle breeze\',
            style: {
               color: \'#606060\'
            }   
         }
      }, { // Moderate breeze
         from: 5.5,
         to: 8,
         color: \'rgba(0, 0, 0, 0)\',
         label: {
            text: \'Moderate breeze\',
            style: {
               color: \'#606060\'
            }
         }
      }, { // Fresh breeze
         from: 8,
         to: 11,
         color: \'rgba(68, 170, 213, 0.1)\',
         label: {
            text: \'Fresh breeze\',
            style: {
               color: \'#606060\'
            }
         }
      }, { // Strong breeze
         from: 11,
         to: 14,
         color: \'rgba(0, 0, 0, 0)\',
         label: {
            text: \'Strong breeze\',
            style: {
               color: \'#606060\'
            }
         }   
      }, { // High wind
         from: 14,
         to: 15,
         color: \'rgba(68, 170, 213, 0.1)\',
         label: {
            text: \'High wind\',
            style: {
               color: \'#606060\'
            }
         }
      }]
   };
   var tooltip = {
      valueSuffix: \' m/s\'
   };
   var plotOptions = {
      spline: {
         lineWidth: 4,
         states: {
            hover:{
               lineWidth:5}},
         marker:{
            enabled:false},
         pointInterval:3600000,// one hour
         pointStart:Date.UTC(2009,9,6,0,0,0)}};var series=[{
         name:\'Vik i Sogn\',      
         data:[4.3,5.1,4.3,5.2,5.4,4.7,3.5,4.1,5.6,7.4,6.9,7.1,7.9,7.9,7.5,6.7,7.7,7.7,7.4,7.0,7.1,5.8,5.9,7.4,8.2,8.5,9.4,8.1,10.9,10.4,10.9,12.4,12.1,9.5,7.5,7.1,7.5,8.1,6.8,3.4,2.1,1.9,2.8,2.9,1.3,4.4,4.2,3.0,3.0]},{
         name:\'Norway\',
         data:[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.1,0.0,0.3,0.0,0.0,0.4,0.0,0.1,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.6,1.2,1.7,0.7,2.9,4.1,2.6,3.7,3.9,1.7,2.3,3.0,3.3,4.8,5.0,4.8,5.0,3.2,2.0,0.9,0.4,0.3,0.5,0.4]}];var navigation ={
      menuItemStyle:{
         fontSize:\'10px\'}}var json ={};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.navigation = navigation;
   $(\'#container\').highcharts(json);});</script></body></html>
View Code

以上实例输出结果为：

Highcharts 时间间隔图表

 

实例

文件名：highcharts_spline_time.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: \'spline\'      
   }; 
   var title = {
      text: \'Snow depth at Vikjafjellet, Norway\'   
   };
   var subtitle = {
      text: \'Irregular time data in Highcharts JS\'
   };
   var xAxis = {
      type: \'datetime\',
      dateTimeLabelFormats: { // don\'t display the dummy year
         month: \'%e. %b\',
         year: \'%b\'
      },
      title: {
         text: \'Date\'
      }
   };
   var yAxis = {
      title: {
         text: \'Snow depth (m)\'
      },
      min: 0
   };
   var tooltip = {
      headerFormat: \'<b>{series.name}</b><br>\',
      pointFormat: \'{point.x:%e. %b}: {point.y:.2f} m\'
   };
   var plotOptions = {
      spline: {
         marker: {
            enabled: true
         }
      }
   };
   var series= [{
         name: \'Winter 2007-2008\',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: [
             [Date.UTC(1970,  9, 27), 0   ],
             [Date.UTC(1970, 10, 10), 0.6 ],
             [Date.UTC(1970, 10, 18), 0.7 ],
             [Date.UTC(1970, 11,  2), 0.8 ],
             [Date.UTC(1970, 11,  9), 0.6 ],
             [Date.UTC(1970, 11, 16), 0.6 ],
             [Date.UTC(1970, 11, 28), 0.67],
             [Date.UTC(1971,  0,  1), 0.81],
             [Date.UTC(1971,  0,  8), 0.78],
             [Date.UTC(1971,  0, 12), 0.98],
             [Date.UTC(1971,  0, 27), 1.84],
             [Date.UTC(1971,  1, 10), 1.80],
             [Date.UTC(1971,  1, 18), 1.80],
             [Date.UTC(1971,  1, 24), 1.92],
             [Date.UTC(1971,  2,  4), 2.49],
             [Date.UTC(1971,2,11),2.79],[Date.UTC(1971,2,15),2.73],[Date.UTC(1971,2,25),2.61],[Date.UTC(1971,3,2),2.76],[Date.UTC(1971,3,6),2.82],[Date.UTC(1971,3,13),2.8],[Date.UTC(1971,4,3),2.1],[Date.UTC(1971,4,26),1.1],[Date.UTC(1971,5,9),0.25],[Date.UTC(1971,5,12),0]]},{
         name:\'Winter 2008-2009\',
         data:[[Date.UTC(1970,9,18),0],[Date.UTC(1970,9,26),0.2],[Date.UTC(1970,11,1),0.47],[Date.UTC(1970,11,11),0.55],[Date.UTC(1970,11,25),1.38],[Date.UTC(1971,0,8),1.38],[Date.UTC(1971,0,15),1.38],[Date.UTC(1971,1,1),1.38],[Date.UTC(1971,1,8),1.48],[Date.UTC(1971,1,21),1.5],[Date.UTC(1971,2,12),1.89],[Date.UTC(1971,2,25),2.0],[Date.UTC(1971,3,4),1.94],[Date.UTC(1971,3,9),1.91],[Date.UTC(1971,3,13),1.75],[Date.UTC(1971,3,19),1.6],[Date.UTC(1971,4,25),0.6],[Date.UTC(1971,4,31),0.35],[Date.UTC(1971,5,7),0]]},{
         name:\'Winter 2009-2010\',
         data:[[Date.UTC(1970,9,9),0],[Date.UTC(1970,9,14),0.15],[Date.UTC(1970,10,28),0.35],[Date.UTC(1970,11,12),0.46],[Date.UTC(1971,0,1),0.59],[Date.UTC(1971,0,24),0.58],[Date.UTC(1971,1,1),0.62],[Date.UTC(1971,1,7),0.65],[Date.UTC(1971,1,23),0.77],[Date.UTC(1971,2,8),0.77],[Date.UTC(1971,2,14),0.79],[Date.UTC(1971,2,24),0.86],[Date.UTC(1971,3,4),0.8],[Date.UTC(1971,3,18),0.94],[Date.UTC(1971,3,24),0.9],[Date.UTC(1971,4,16),0.39],[Date.UTC(1971,4,21),0]]}];var json ={};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $(\'#container\').highcharts(json);});</script></body></html>
View Code

以上实例输出结果为：

 

 

 

Highcharts 对数图表

 

配置

配置 yAxis.type 为 \'logarithmic\'。它定义了 x 轴类型。可选值有 "linear", "logarithmic", "datetime" 或 "category"。默认值为linear。

yAxis
var yAxis = {
   type: \'logarithmic\',
   minorTickInterval: 0.1
};

实例

文件名：highcharts_line_logarithmic.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 title = {
      text: \'对数实例(runoob.com)\'   
   };
   var xAxis = {
      tickInterval: 1
   };
   var yAxis = {
      type: \'logarithmic\',
      minorTickInterval: 0.1
   };
   var tooltip = {
      headerFormat: \'<b>{series.name}</b><br>\',
      pointFormat: \'x = {point.x}, y = {point.y}\'
   };
   var plotOptions = {
      spline: {
         marker: {
            enabled: true
         }
      }
   };
   var series= [{
         name: \'data\',
         data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
         pointStart: 1
      }
   ];     
      
   var json = {};   
   json.title = title;   
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>
View Code

以上实例输出结果为：

 
 

 

 
 
 

 

 

 

 

以上是关于Highcharts 标示区曲线图；Highcharts 对数图表；Highcharts 时间间隔图表的主要内容，如果未能解决你的问题，请参考以下文章

点击量。

画图工具除了echarts我使用highcharts

Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表

Highcharts 时间序列，可缩放的图表；Highcharts X 轴翻转曲线图；Highcharts 带标记曲线图

Highcharts，停止动态样条曲线图的渲染

highcharts曲线图