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> 

然后有一个窗体或东西，当提交添加注释到图表。这是演示这个（http://plnkr.co/edit/UYrRi3cCRyiv1IL4QDt4?p=preview）的基本plnkr。这里我使用了highcharts注释模块（https://www.npmjs.com/package/highcharts-annotations）。您可以通过编程添加批注

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