Question

在我的VueJs应用程序中，我展示了Pie-Chart＆amp;表显示数据。在图例onClick上我试图过滤表行。这是我的代码

          <pie-chart
            :donut="false"
            :data="charInfo"
            :responsive="true"
            :library="{legend:{display: true,onClick:itemSelected}}"
            legend="top"
            :colors="['#5C9AFF', '#FF3263']"/>

点击特定图例，＆＃39; itemSelected＆＃39;用2个参数调用，第1个是mouseEvent＆amp;第二个是legendItem。我可以得到传奇文字＆amp;可以过滤表格行。但问题是，它覆盖了默认行为＆amp;引人注目的传奇故事隐藏/显示禁用的饼图部分。在搜索时，我遇到了 ChartJs Legend onClick Issue。它说要存储原始传奇onClick event＆amp;从我的代码中调用它。我可以使用＆＃39; const original = Chart.defaults.pie.legend.onClick＆＃39;之类的东西存储原始onClick，但问题是我没有图表对象来调用＆quot; original.call（，event，legendItem ）。在这里，我有点卡住了。

Answer 1

在使用ng2-charts时，我不停地尝试了一系列不同的实现来为自己解决这个问题（顺便说一句，这就是我发现此问题的方式）。我最终添加了一个@ViewChild来引用在html中定义的图表。

ts中为此解决方法所需的

引用：

import { Component, Input, Host, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { ChartsModule, BaseChartDirective } from 'ng2-charts';

在ts中添加到我班的顶部：

export class StatisticsComponent implements OnInit, OnDestroy {

  @ViewChild('myChart') myChart : BaseChartDirective;

使用ng2-charts的图表的html对象：

<canvas *ngIf = "loaded" 
        baseChart
        #myChart = 'base-chart'
        [datasets]="chartData"
        [colors]="chartColors"
        [chartType]="'line'"      
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="true"
        (chartClick)="onChartClick($event)">
    </canvas>

在用于覆盖图例onClick的方法中（我个人在chartOptions中做到了），可以添加以下代码行：

this.chart.data.datasets[legendItem.datasetIndex].hidden = !this.chart.data.datasets[legendItem.datasetIndex].hidden;
this.chart.update();

这将复制图例项目的标准“ onClick”，因此您无需费心存储原始功能。可能很重要的一点是，在这段代码中，legendItem是onClick中的第二个参数（第一个是事件）：

function(e: any, legendItem: any)

此修复程序的唯一问题是，默认情况下，在ng2-charts中，默认情况下不公开.hidden artibute，因此我必须按照以下方法在模块中进行一些改动： https://github.com/valor-software/ng2-charts/issues/915。

虽然我感谢您的问题与ng2-chart无关。我想您可能会在包装器中使用类似的方法。至少我认为在设法解决问题后，我会与您分享我的所作所为：）

ChartKick - ChartJs - Legend onClick覆盖默认行为

1 个答案: