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

Question

我的 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
    }
  ];

Answer 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
  }
];

Answer 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.

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

How to show only one line in time in a multiple datasets in line-chart js

javascript

charts

linechart

node.js

angular