如何在折線圖js中的多個資料集中只顯示一條時間線-有解無憂

我的 charts.js 圖中有兩條線。一個是 1-10 的比例，另一個是 100 000-1 000 000 000。我想把它們放在一張圖中，而不是兩張圖中，但不要同時顯示它們，因為它們只是一條海峽線.

是否可以在圖表配置中顯示一條或另一條線？當我轉動第一個時，第二個會自動隱藏，反之亦然。第一張圖片可能會使用戶感到困惑。我想在第一次加載時，像 pic2 或 pic3 一樣顯示。

如何在折線圖js中的多個資料集中只顯示一條時間線

這是我的圖表代碼：

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

uj5u.com熱心網友回復：

使用資料集選項 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
  }
];

uj5u.com熱心網友回復：

  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 可以處于活動狀態，另一個是交叉的。如果單擊另一個，它會變得可見，第一個被交叉。它是 or 或并且不能關閉或打開。也許這可以作為永久選項添加到 chartsjs：toggleLegend。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/345628.html

標籤：javascript 节点.js 有角的图表折线图

上一篇：如何使2個芯片串列相互互動AngularMaterial

下一篇：java之資料型別+運算子