使用范围和折线的面积图

上一个
下一个

以下是使用范围和折线绘制的面积图示例。

我们已在Highcharts 配置语法章节中了解了用于绘制图表中的配置。现在，我们将了解使用范围和折线的面积图示例。另外，我们还会了解其他配置。我们已更改了图表中的 type 属性。

series

将图表类型配置为基于'arearange'。 chart.type 确定图表系列类型。此处，默认值为“line”。

var series = {
   type: 'arearange'  
};

示例

highcharts_area_rangeline.htm

演示 
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
      <script src = "https://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_area_charts.htm
打印页面
上一个
下一个
广告