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

Question

我正在使用angular2-highcharts折线图来显示每周的访问者。我使用模拟数据在图表中创建点。我想要达到的目的是用户可以输入类似“平安夜”的内容。当他/她点击某个点然后在该点显示注释时。

<table id="majorCities">

</table>

Answer 1

我认为你走在正确的轨道上。我会在点上添加一个点击事件

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

然后提交一个表单或其他内容，在提交时为图表添加注释。这是一个基本的plnkr，展示了这一点（http://plnkr.co/edit/UYrRi3cCRyiv1IL4QDt4?p=preview）。这里我使用的是highcharts annotations模块（https://www.npmjs.com/package/highcharts-annotations）。您可以通过

以编程方式添加注释

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