时间戳

首页 > 解决方案 > 在一张图上同时对动作事件执行动作

angular - 在一张图上同时对动作事件执行动作

问题描述

我使用 angular-highcharts 在一个图中创建了两个饼图，现在我想在单击第一个图时对第二个饼图执行相同的操作，反之亦然。当我单击第一个饼图的任何部分时，它也会被选中并切片。同时我想对第二个饼图执行相同的操作。这就是我正在创建两个饼图的方式，任何帮助将不胜感激，在此先感谢。

const pChart = new Chart({
                    chart: {
                        type: 'pie',
                        styledMode: true
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    title: {
                        text: ''
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                    return Math.round(this.percentage * 100) / 100 + ' %';
                                },
                                distance: -30,
                                color: '#000'
                            },
                            colors: ['#f7a35c', '#90ed7d'],
                            size: 180,
                            borderColor: 'none',
                            shadow: true
                        },
                        series: {
                            point: {
                                events: {
                                    legendItemClick: function () {
                                        return false; // <== returning false will cancel the default action
                                    }
                                }
                            },
                            cursor: 'pointer',
                            events: {
                                click: (event) => {
                                    console.log('event', event);
                                    for (let j = 0; j < this.qecData.length; j++) {
                                        this.select[j] = this.qecData[j].reasonForDebit === event.point.name;
                                    }
                                }
                            }
                        }
                    },
                    series: [
                        {
                            name: 'Frequency',
                            data: freqData,
                            center: ['20%', '60%'],
                            showInLegend: true,
                            startAngle: 270,
                            title: {
                                align: 'center',
                                text: 'Frequency Graph',
                                verticalAlign: 'top',
                                y: -50,
                                style: {
                                    color: '#869ca7'
                                }
                            }
                        },
                        {
                            name: 'Amount',
                            data: amtData,
                            center: ['80%', '60%'],
                            showInLegend: false,
                            startAngle: 180,
                            title: {
                                align: 'center',
                                text: 'Amount Graph',
                                verticalAlign: 'top',
                                y: -50,
                                style: {
                                    color: '#869ca7'
                                }
                            }
                        }
                    ]
                });

标签： angularhighcharts

解决方案

series.pie.point.events.click当您可以访问被点击的点时，您可以使用回调来实现它。在那里，您将找到该点的索引和图表索引，它允许您select使用第二个图表中的相同索引调用该点上的方法。检查下面发布的代码和演示。它使用我推荐你使用的highcharts-angular 官方包装器（可以在这里下载：https ://github.com/highcharts/highcharts-angular ）。

app.module.ts ：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, ChartComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

chart.component.html ： 

<div class="boxChart__container">
  <div>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFromInput"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFromInput"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>
  </div>
</div>

chart.component.ts：

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  charts;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: "pie"
    },
    title: {
      text: "Browser market shares in January, 2018"
    },
    tooltip: {
      pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: true,
          format: "<b>{point.name}</b>: {point.percentage:.1f} %",
          style: {
            color:
              (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
              "black"
          }
        }
      }
    },
    series: [
      {
        name: "Brands",
        colorByPoint: true,
        point: {
          events: {
            click: function() {
              this.series.chart.chartComponent.showCharts(this);
            }
          }
        },
        data: [
          {
            name: "Chrome",
            y: 61.41,
            sliced: true,
            selected: true
          },
          {
            name: "Internet Explorer",
            y: 11.84
          },
          {
            name: "Firefox",
            y: 10.85
          },
          {
            name: "Edge",
            y: 4.67
          },
          {
            name: "Safari",
            y: 4.18
          },
          {
            name: "Sogou Explorer",
            y: 1.64
          },
          {
            name: "Opera",
            y: 1.6
          },
          {
            name: "QQ",
            y: 1.2
          },
          {
            name: "Other",
            y: 2.61
          }
        ]
      }
    ]
  };

  constructor() {
    const self = this;

    self.chartCallback = chart => {
      self.chart = chart;
      self.chart.chartComponent = self;
      self.charts = Highcharts.charts;
    };
  }

  showCharts(point) {
    const chart = point.series.chart,
      chartIndex = chart.index,
      pointIndex = point.index,
      secondChartIndex = chartIndex === 0 ? 1 : 0,
      secondChart = this.charts[secondChartIndex],
      secondChartPoint = secondChart.series[0].points[pointIndex];

    secondChartPoint.select();
  }

  ngOnInit() {}
}

演示：
https ://codesandbox.io/s/nw8yq0n9ol

API参考：
https ://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Point#select

推荐阅读