javascript - 如何在折线图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

使用数据集选项隐藏

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