Angular-googlecharts-line-axis

カスタム軸と目盛りラベル付きの折れ線グラフ

以下は、カスタム軸と目盛りラベルを備えた折れ線グラフの例です。

link：/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、カスタム軸と目盛りラベルを備えた折れ線グラフの例を見てみましょう。

構成

*textStyle* 構成を使用して、軸と目盛りラベルのスタイルを変更しました。

options = {
   hAxis: {
      title: 'Month',
      textStyle:{
         color:'#01579b',
         fontSize:16,
         fontName:'Arial',
         bold:false,
         italic:true
      }
   },
   vAxis:{
      title: 'Temperature',
      textStyle:{
         color:'#01579b',
         fontSize:16,
         fontName:'Arial',
         bold:false,
         italic:true
      }
   },
};

例

*_app.component.ts_*

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Average Temperatures of Cities';
   type = 'LineChart';
   data = [
      ["Jan",  7.0, -0.2, -0.9, 3.9],
      ["Feb",  6.9, 0.8, 0.6, 4.2],
      ["Mar",  9.5,  5.7, 3.5, 5.7],
      ["Apr",  14.5, 11.3, 8.4, 8.5],
      ["May",  18.2, 17.0, 13.5, 11.9],
      ["Jun",  21.5, 22.0, 17.0, 15.2],
      ["Jul",  25.2, 24.8, 18.6, 17.0],
      ["Aug",  26.5, 24.1, 17.9, 16.6],
      ["Sep",  23.3, 20.1, 14.3, 14.2],
      ["Oct",  18.3, 14.1, 9.0, 10.3],
      ["Nov",  13.9,  8.6, 3.9, 6.6],
      ["Dec",  9.6,  2.5,  1.0, 4.8]
   ];
   columnNames = ["Month", "Tokyo", "New York","Berlin", "Paris"];
   options = {
      hAxis: {
         title: 'Month',
         textStyle:{
            color:'#01579b',
            fontSize:16,
            fontName:'Arial',
            bold:false,
            italic:true
         }
      },
      vAxis:{
         title: 'Temperature', textStyle:{
            color:'#01579b',
            fontSize:16,
            fontName:'Arial',
            bold:false,
            italic:true
         }
      },
   };
   width = 550;
   height = 400;
}

結果

結果を確認します。

カスタム軸と目盛りラベル付きの基本折れ線グラフ