0

Angular2 の値が変更されたときに Google チャートを更新したいと考えています。

私の Angular2 test.component.html には、次のようなテンプレートがあります。

<h1>
  Test Chart
</h1>

<div>
  // I want to bind this value with Goolgle Gauge
  {{parameter.value}}
</div>

<div class="gauge">
  <google-chart [data]="gaugeChartOptions"></google-chart>
</div>

私の Angular2 test.component.ts は次のようになります。

export class ChartTestComponent implements OnInit {

  public parameter: Parameter;

  public gaugeChartOptions = {
    chartType: 'Gauge',
    dataTable: [
      ['Label', 'Value'],
      ['Value', 5] // I'd like to bind it with {{parameter.value}}
    ],
    options: {
      width: 200, height: 250,
      redFrom: 90, redTo: 100,
      yellowFrom: 75, yellowTo: 90,
      minorTicks: 5
    },
  };

  constructor(private parameterService: ParameterService) {
  }

  changeVal(value: number) {
    this.gaugeChartOptions = Object.create(this.gaugeChartOptions);
    this.gaugeChartOptions.dataTable[1][1] =  Number(value);
  }

  ngOnInit() {

    this.parameter =  this.parameterService.getByPath('test_signal/10_Hz');
  }


}

{{parameter.value}} でゲージ値を変更するにはどうすればよいですか?

ありがとうございました。

4

0 に答える 0