angular2-highchartsポイントをクリックしてユーザー入力を開き、ユーザー入力を注釈で表示します

Question

私はangular2-highcharts折れ線グラフを使用して週当たりの訪問者を表示しています。私はモックデータを使ってチャート内のポイントを作成します。私が達成したいのは、ユーザーがポイントをクリックしてそのポイントに注釈が表示されるときに、「クリスマスイブ」のようなものを入力できることです。

import { Component, OnInit } from '@angular/core'; 
import { Data } from '../data'; 
import { DataService } from '../data.service'; 
import { ChartOptions, Options } from 'highcharts'; 

@Component({ 
    selector: 'app-highcharts', 
    templateUrl: './highcharts.component.html', 
    styleUrls: ['./highcharts.component.css'], 
    template: ` 
    <div class="container"> 
    <div class="chart"> 
    <chart [options]="options"> 
    <series (click)="click($event)"> 
    </series> 
    </chart> 
    <p>{{serieName}} is geselecteerd<p> 
    </div> 
    `, 
}) 
export class HighchartsComponent implements OnInit { 
    title = "Highcharts PoC" 
    public options: Options; 

    constructor(private dataService: DataService) { 

    this.options = { 
     title: { text: 'Visitors per week' }, 
     chart: { zoomType: 'x' }, 
     yAxis: { 
     title: { 
      text: "Visitors" 
     } 
     }, 
     xAxis: { 
     title: { 
      text: "Week number" 
     } 
     }, 
     plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
      events: { 
       click: function() { 
       { 
        this.serieName = 'Appell'; 
        return true 
       } 
       // alert('Christmas Eve'); 
       // return true; 
       } 
      } 
      }, 
      pointStart: 1 // Week number 
     } 
     }, 
     series: [{ 
     name: '2017', 
     data: dataService.getHighchartsData() 
     } 
     ] 
    }; 
    } 

    ngOnInit() { 
    } 
} 

Answer 1

あなたは正しい方向にいると思います。クリックイベントをポイントに追加します

// component.html 
<chart> 
    <series> 
     <point (click)="onPointClick($event.context)"></point> 
    </series> 
</chart> 

次に、送信時にグラフに注釈を追加するフォームがあります。これはこれを示す基本的なplnkrです（http://plnkr.co/edit/UYrRi3cCRyiv1IL4QDt4?p=preview）。ここでは、highcharts注釈モジュール（https://www.npmjs.com/package/highcharts-annotations）を使用しています。プログラムによって注釈を追加することができます

// component.ts 
this.chart.annotations.add({ 
    title: { 
     text: 'Christmas Eve' 
    }, 
    xValue: 24, 
    yValue: 12 
});