Angular Highcharts:动态添加点的曲线图(Chart with Point Addition Capability)
下面给出了一个具有动态添加点的曲线图示例。
配置
chart.events
向chart.event属性添加click方法,此方法向图表中单击区域的x,y坐标中添加一个新点。
events: { click: function (e) { // find the clicked values and the series var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // Add it series.addPoint([x, y]); } }
例子
app.component.ts
import { Component } from '@angular/core'; import * as Highcharts from 'highcharts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { highcharts = Highcharts; chartOptions = { chart : { type: 'scatter', margin: [70, 50, 60, 80], marginRight: 10, events: { click: function (e) { // find the clicked values and the series var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // Add it series.addPoint([x, y]); } } }, title : { text: 'User supplied data' }, subtitle : { text: 'Click the plot area to add a point. Click a point to remove it.' }, xAxis : { gridLineWidth: 1, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60 }, yAxis : { title: { text: 'Value' }, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, plotOptions: { series: { lineWidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } }, legend: { enabled: false }, exporting : { enabled: false }, series : [{ data: [[20, 20], [80, 80]] }] }; }
结果