开发学院,分享开发教程和最新动态
章节列表 Angular Highcharts 教程Angular Highcharts:概述Angular Highcharts:安装Angular Highcharts:配置语法Angular Highcharts:基本折线图(Basic Line Chart)Angular Highcharts:带有数据标签的折线图(Line Chart with Data Labels)Angular Highcharts:带时间序列可缩放的图表(Time Series, Zoomable Chart)Angular Highcharts:反转轴向的曲线图(Spline with inverted Axes)Angular Highcharts:带符号的曲线图(Spline chart with Symbols)Angular Highcharts:带绘图域的曲线图(Spline chart with Plot Bands)Angular Highcharts:基本面积图(Basic Area Chart)Angular Highcharts:​负值面积图(Area Chart with negative values)Angular Highcharts:堆积面积图(Stacked Area Chart)Angular Highcharts:百分比面积图(Percentage Area Chart)Angular Highcharts:缺少值的面积图(Area Chart with missing values)Angular Highcharts:具有反转值的面积图 (Area Chart with inverted values)Angular Highcharts:使用样条线的面积图(Area Chart using Spline)Angular Highcharts:基本条状图(Basic Bar Chart)Angular Highcharts:堆积条状图(Stacked Bar Chart)Angular Highcharts:负值条状图(Bar Chart with negative values)Angular Highcharts:基本柱状图(Basic Column Chart)Angular Highcharts:负值柱形图(Column Chart with negative values)Angular Highcharts:堆积柱形图(Stacked Column Chart)Angular Highcharts:堆叠和分组柱形图(Stacked and Grouped Column Chart)Angular Highcharts:具有堆叠百分比的柱状图(Column with stacked percentage)Angular Highcharts:具有旋转标签的柱状图(Column with rotated labels)Angular Highcharts:具有范围的柱状图(Column Range)Angular Highcharts:基本饼状图(Basic Pie Chart)Angular Highcharts:带图例的饼状图(Pie Chart with Legends)Angular Highcharts:环状饼图(Donut Chart)Angular Highcharts:散点图(Scatter Charts)Angular Highcharts:每秒更新的曲线图(Spline updating each second)Angular Highcharts:动态添加点的曲线图(Chart with Point Addition Capability)Angular Highcharts:包含柱状图、折线图和饼状图的组合(Chart with Column, Line and Pie)Angular Highcharts:包含双轴、折线图和柱状图的例子(Dual Axes, Line and Column)Angular Highcharts:包含多轴向的例子(多轴)Angular Highcharts:带有回归线的散点图(Scatter Chart with Regression Line)Angular Highcharts:3D柱状图(3D Column Chart)Angular Highcharts:3D散点图(3D Scatter Chart)Angular Highcharts:3D饼状图(3D Pie Chart)Angular Highcharts:热力图(Heat Map Chart)Angular Highcharts:树形图(Tree Map Chart)

Angular Highcharts:带绘图域的曲线图(Spline chart with Plot Bands)

带绘图域的曲线图

  以下是带有绘图域的曲线图的示例。

配置

  使用yAxis.plotBands属性配置波段。使用“from”和“to”属性设置波段范围。使用“color”属性设置波段的颜色。使用“label”属性设置波段标签的样式。

yAxis

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'
            }
         }
      }
   ]
};

例子

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as highchartsTreemap from 'highcharts/modules/treemap';
highchartsTreemap(Highcharts);
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      chart : {
         type: 'spline'      
      }, 
      title : {
         text: 'Wind speed during two days'   
      },
      subtitle : {
         text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
      },
      xAxis : {
         type: 'datetime',
         labels: {
            overflow: 'justify'
         }
      },
      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'
                  }
               }
            }
         ]
      },
      tooltip : {
         valueSuffix: ' m/s'
      },
      plotOptions : {
         spline: {
            lineWidth: 4,
            states: {
               hover: {
                  lineWidth: 5
               }
            },
            marker: {
               enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
         }
      },
      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]
         }
      ],     
      navigation : {
         menuItemStyle: {
            fontSize: '10px'
         }
      }    
   };
}

结果

angular_highcharts_spline_bands.jpg