Angular-highcharts-spline-bands

提供:Dev Guides
移動先:案内検索

プロットバンドを使用したスプラインチャート

以下は、プロットバンドのあるスプラインチャートの例です。

link:/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 ここで、追加の構成/手順が行われるプロットバンドを含むスプラインチャートの例を理解しましょう。

構成

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.componentl',
  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'
         }
      }
   };
}

結果

結果を確認します。

プロットバンド付きスプラインチャート