如何在折线图js的多个数据集中只显示一行

Posted 2023-05-07

【中文标题】如何在折线图js的多个数据集中只显示一行

【英文标题】：How to show only one line in time in a multiple datasets in line-chart js

【发布时间】：2021-12-16 13:19:18

【问题描述】：

我的 charts.js 图表中有两条线。一个是 1-10 的比例，另一个是 100 000-1 000 000 000。我想将它们放在一个图表中，而不是两个，但不要同时显示它们，因为它们只是一条海峡线.

是否可以在图表配置中显示一条或另一条线？当我转动第一个时，第二个会自动隐藏，反之亦然。第一张图片可能会使用户感到困惑。我希望在第一次加载时显示为 pic2 或 pic3。

这是我的图表代码：

public barChartOptions: ChartOptions = 
    indexAxis: 'x',
    responsive: true,
    plugins: 
  ;
  public barChartLabels: string[] = this.xLabels;
  public barChartType: ChartType = 'line';
  public barChartLegend = true;
  public barChartData: ChartDataset[] = [
    
      data: [],
      backgroundColor: 'green',
      borderColor: 'rgb(75, 192, 192)',
      label: 'Volume [m3]',
      fill: false,
    ,
    
      data: [],
      backgroundColor: 'red',
      borderColor: 'rgb(255, 127, 127)',
      label: 'Flow [m3/h]',
      fill: false
    
  ];

【参考方案1】：

使用数据集选项hidden

public barChartData: ChartDataset[] = [
  
    data: [],
    backgroundColor: 'green',
    borderColor: 'rgb(75, 192, 192)',
    label: 'Volume [m3]',
    fill: false,
    hidden: false  // <-- shown
  ,
  
    data: [],
    backgroundColor: 'red',
    borderColor: 'rgb(255, 127, 127)',
    label: 'Flow [m3/h]',
    fill: false,
    hidden: true  // <-- hidden
  
];

【讨论】：

感谢隐藏财产的想法。我添加了一个标志和一个新的点击处理程序。切换 legendItem 的解决方案在 ;) 它有效。

【参考方案2】：

  isHiden = false;
  public barChartOptions: ChartOptions = 
    indexAxis: 'x',
    responsive: true,
    plugins: 
      legend: 
          onClick: this.toggleLegendClickHandler
      
    
  ;
  public barChartLabels: string[] = this.xLabels;
  public barChartType: ChartType = 'line';
  public barChartLegend = true;
  public barChartData: ChartDataset[] = [
    
      data: [],
      backgroundColor: 'green',
      borderColor: 'rgb(75, 192, 192)',
      label: 'Cumulative [m3]',
      fill: false,
      hidden: this.isHiden
    ,
    
      data: [],
      backgroundColor: 'red',
      borderColor: 'rgb(255, 127, 127)',
      label: 'Flow [m3/h]',
      fill: false,
      hidden: !this.isHiden
    
  ];

我更新了图例的原始 onClick() 处理程序::

toggleLegendClickHandler(e: ChartEvent, legendItem: LegendItem, legend: any): void 
let index = legendItem.datasetIndex;
let indexOther: number = (index === 0) ? 1 : 0;
console.log("legendItem.datasetIndex: " + index + " indexOther: " + indexOther);
const ci = legend.chart;
if (ci.isDatasetVisible(index)) 
    ci.hide(index);
    legendItem.hidden = true;
    ci.show(indexOther);
 else 
    ci.show(index);
    legendItem.hidden = false;
    ci.hide(indexOther);

现在，只有一个 legendItem 可以激活，另一个是交叉的。如果单击另一个，它将变为可见，第一个交叉。它是或或不能在一起或不在一起。也许这可以作为永久选项添加到chartsjs：toggleLegend。