代码之家 › 专栏 › 技术社区 › Aniruddha

ChartKick-ChartJs-图例onClick覆盖默认行为

chartkick chart.js vuejs2 javascript

Aniruddha · 技术社区 · 6 年前

在VueJs应用程序中,我显示饼图;显示数据的表格。在legend onClick上,我试图筛选表行。这是我的密码

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

在此处单击特定图例,“itemSelected”将使用2个参数调用,第一个参数是MouseeEvent&第二个是legendItem。我可以获取图例文本(&A);可以筛选表行。但问题是,它凌驾于违约行为之上;删除图例(&A);禁用饼图的隐藏/显示部分。搜索时,我发现 ChartJs Legend onClick Issue 。它表示在单击事件时存储原始图例&从我的代码中调用它。我可以使用类似“const original=Chart”的方式存储原始onClick。默认设置。馅饼传奇onClick“,但问题是我并没有可以调用“original”的图表对象。调用(、事件、legendItem)。现在我有点被卡住了。

1 回复 | 直到 6 年前

Paul Marshall 6 年前

在使用ng2图表时,我反复尝试了一系列不同的实现来为自己解决这个问题(顺便提一下,这就是我如何发现这个问题的)。最后,我添加了一个@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图表的图表的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中,图表。默认情况下,隐藏的artibute不会公开,因此我必须按照以下方法在模块中进行一些修改: https://github.com/valor-software/ng2-charts/issues/915 。

虽然我很感激你的问题与ng2图表无关。我想您可能会在包装器中使用类似的方法。至少我想,在我设法解决了我的问题后,我会与你分享我所做的:)