Angular-highcharts-dynamic-click

ポイント追加機能付きチャート

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

ポイント追加機能を備えたチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

chart.events

クリックメソッドを chart.event プロパティに追加します。 このメソッドは、チャート内のクリックされた領域の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.componentl',
  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: [[Result

Verify the result.

image:/angular_highcharts/angular_highcharts_dynamic_click.jpg[Chart with point addition]