angular2-highcharts 点击点，打开用户输入，在注释中显示用户输入

Question

我正在使用 angular2-highcharts 折线图来显示每周的访问者。我使用模拟数据在图表中创建点。我想要实现的是，当 he/she 单击某个点时，用户可以输入类似 'Christmas Eve' 的内容，然后会在该点显示注释。

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). Here I am using the highcharts annotations module (https://www.npmjs.com/package/highcharts-annotations)。您可以通过执行

以编程方式添加注释

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

angular2-highcharts 点击点，打开用户输入，在注释中显示用户输入

angular2-highcharts click on point, open user input, display user input in annotation

highcharts

angular2-highcharts

angular