隐藏/显示图例中图表中的相应数据，单击ngx图表

Question

>我正在使用角度 6 和 ngx 图表，我需要单击图例项，图表中的相应数据应该显示/隐藏

ng-chart库确实具有此功能，我的客户端请求它。

编辑01：

我几乎可以正常工作，但是在应用 axisFormat 时遇到了问题。 一旦我从图例中删除一个项目，它就会重新格式化 x 轴，并且不会在不应用 AxisFormat 的情况下从字面上写出数据的来源。有什么解决办法吗？

onSelect (event) {
let temp = JSON.parse(JSON.stringify(this.multi));
this.sourceData = JSON.parse(JSON.stringify(this.multi2));
if (this.isDataShown(event)) {    
//Hide it
temp.some(pie => {
const pie2 = pie.name[0] + ',' + pie.name[1];
// console.log('pie', pie[0], event, pie2);
if (pie2 === event) {
pie.series = [];
return true;
}
});
} else {
//Show it back
console.log('Entramos en el ELSE');
const pieToAdd = this.sourceData.filter(pie => {
const pie2 = pie.name[0] + ',' + pie.name[1];
return pie2 === event;
});
temp.some(pie => {
const pie2 = pie.name[0] + ',' + pie.name[1];
if (pie2 === event) {
pie.series = pieToAdd[0].series;
return true;
}
});
}
console.log('log temp: ' + JSON.stringify(temp));
this.multi = temp;
// this.axisFormat(this.multi);
}
isDataShown = (name) => {
const selectedPie = this.multi.filter(pie => {
const pie2 = pie.name[0] + ',' + pie.name[1];
return pie2 === name && pie.series[0] !== undefined;
});
return selectedPie && selectedPie.length > 0;
}

axisFormat(val) {
const options = { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' };
// Esto funciona pero al hacer timeline no pone horas val.toLocaleDateString("es-ES", options);
console.log('val:', val.toLocaleDateString('es-ES', options));
return val.toLocaleDateString('es-ES', options);
}

.HTML

<ngx-charts-line-chart [view]="" [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendPosition="'below'" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [timeline]="timeline" [roundDomains]="true" [animations]="animations"  (select)="onSelect($event)" [xAxisTickFormatting]="axisFormat">
<ng-template #seriesTooltipTemplate let-items="model">
<p>{{items[0].name | date:'medium'}}</p>
<ul>
<li *ngFor="let item of items">
{{item.series}}: {{item.value | number}}
</li>
</ul>
</ng-template>

</ngx-charts-line-chart>

编辑

你好 我已经设法解决了这个问题，并增加了一个例子，以防它可以帮助其他人。

https://stackblitz.com/edit/click-lengd-ngx-charts

Answer 1

这就是我们如何为 ngx 饼图实现它。在选择事件的帮助下，捕获它，从数据中识别项目并将其归零。接下来，在下次单击时，将值添加回源副本。在这里看到它的工作原理 ngx 饼图标签过滤器

onSelect (event) {
let temp = JSON.parse(JSON.stringify(this.single));
if (this.isDataShown(event)) {
//Hide it
temp.some(pie => {
if (pie.name === event) {
pie.value = 0;
return true;
}
});
} else {
//Show it back
const pieToAdd = this.sourceData.filter(pie => {
return pie.name === event;
});
temp.some(pie => {
if (pie.name === event) {
pie.value = pieToAdd[0].value;
return true;
}
});
}
this.single = temp;
}
isDataShown = (name) => {
const selectedPie = this.single.filter(pie => {
return pie.name === name && pie.value !== 0;
});
return selectedPie && selectedPie.length > 0;
}

Answer 2

我对 Stack Overflow 有点陌生，但我认为您应该更多地指定您的答案并向我们展示您已经尝试过的内容。尽管如此，我会尽力帮助你。

您应该在 HTML 中为您的图表提供一个(select)="onClickFunction ($event)"。在您的 TS 中，然后调用onClickFunction(event).我总是从给它一个console.log(event)开始，看看我从点击图例中得到了什么。

单击图例后，您将获得单击的元素的标签。然后，您可以在数据中搜索此标签，并将此数据从用于填充图表的数组中删除。

如果你在代码中提供了一个堆栈闪电战或 plunker，我很乐意向你展示如何做到这一点。