Apexcharts 右键获取元素

Question

我正在尝试获取图表元素，以便可以通过右键单击对其进行修改。我正在使用 angular 框架。 Apexcharts 具有内置的左键单击功能，这很棒，但不能用于右键单击。

所以我想做的是将右键单击事件添加到图表元素：

<apx-chart (contextmenu)="onRightClick($event)"
              [series]="chartOptions[i].series"
              [chart]="chartOptions[i].chart"
              [colors]="chartOptions[i].colors"
              [title]="chartOptions[i].title"
              [yaxis]="commonOptions.yaxis"
              [dataLabels]="commonOptions.dataLabels"
              [markers]="commonOptions.markers"
              [stroke]="commonOptions.stroke"
              [grid]="commonOptions.grid"
              [xaxis]="commonOptions.xaxis"
              [tooltip]="commonOptions.tooltip"
            ></apx-chart>

我不知道如何到达、在哪里找到 ID 或图表对象本身。我可以看到“ng-reflect-series”等，但我被困在那里。这是我可以看到 ng-reflect-series 的地方：

    onRightClick(event) {
        console.log("right clicked on me " + event.currentTarget.attributes);
        return false;
    }

安迪的建议？

Answer 1

事件名称是上下文菜单。因此，您的 html 模板代码可以是这样的：

<div id="chart" class="chart" #chart (contextmenu)="onRightClick(chart, chart.id, $event)"></div>

$event 是一个可选参数，但我们还给函数提供了 #chart 元素，因此我们可以读出元素和 chartId。至于获取图表的对象，我想您必须从 Apex 文档中阅读如何阅读它。

onRightClick(chart: HTMLElement, chartId: string, event?: Event) {
  console.log(event)
  console.log(chart)
  console.log(chartId)
}

这是一个工作示例：https://stackblitz.com/edit/apexcharts-bar-chart-issue-qynzcv?file=src%2Fapp%2Fchart%2Fchart.component.ts

Apexcharts 右键获取元素

Apexcharts right click get element

angular

apexcharts