时间戳

首页 > 解决方案 > Chartjs 3.x - 如何在只有 1 个数据集的水平条形图两侧复制 X 轴？

javascript - Chartjs 3.x - 如何在只有 1 个数据集的水平条形图两侧复制 X 轴？

问题描述

我正在尝试在图表的两侧（底部和顶部）复制 X 轴刻度。

我看到过这个问题的较早问题，但这是在 chartjs 2.x 期间 - 从那时起他们已经更改了选项的比例部分。你曾经能够做类似的事情：

xAxes: [
      {
        position: 'top',
      },
      {
        position: 'bottom',
      }
    ]

但在 Chartjs 3.x 中，您无法为 xAxes 提供数组。您现在需要向数据集添加一个 ID，然后在比例选项中引用该 ID。但是当一个说位置：顶部和另一个位置：底部时，我无法在 2 个比例对象中引用 1 个数据集。它只会使用最后一个缩放对象。

所以我的问题是，使用一个数据集。我怎样才能让 X 轴位于图表的底部和水平条形图的顶部？这样，如果图表很大，我不必总是向下滚动来查看值是多少。

编辑：根据反馈，我现在有以下结果，这更接近我正在寻找的结果，但顶部的刻度线发生了什么。为什么他们不匹配底部的数字？

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      borderColor: '#00D',
    }]
  },
  options: {
    indexAxis: "y",
    scales: {
      x: {
      },
      x1: {
        position: 'top'
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

标签： javascripthtmlreactjschart.jsreact-chartjs-2

解决方案

如果您希望在ticks图表顶部看到相同的内容，只需定义第二个 x 轴，如下所示：

x1: {
  position: 'top'
}

请看下面的可运行代码，看看它是如何工作的：

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      borderColor: '#00D',
    }]
  },
  options: {
    scales: {
      x: {
      },
      x1: {
        position: 'top'
      }
    }
  }
});
canvas {
  max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

推荐阅读