是否可以使用 ChartJS 2 将两个 Y 轴组合成一个工具提示？

Question

假设我有两个 Y 轴，分别标记为 "foo" 和 "bar"。这些轴对应于沿相同间隔的点，例如比如说过去 12 周内每周的 foos 和 bars 总计。理想情况下，您将鼠标悬停在折线图上的这些点之一上，工具提示将显示有关 foo 和 bar 的一周数据；如果 Y 轴不超过一个，这就是它的工作原理。实际上，您将鼠标悬停在单个点上以仅查看该特定点的数据。

为清楚起见，我的图表选项如下所示：

const CHART_OPTIONS = {
  scales:
  {
    xAxes: [{
      ticks: {
        display: false,
      },
    }],
    yAxes: [
      {
        type: 'linear',
        id: 'y-axis-0',
        display: false,
        position: 'left',
      },
      {
        type: 'linear',
        id: 'y-axis-1',
        display: false,
        position: 'right',
      },
    ],
  },
};

图表数据分别指定了 y-axis-0 和 y-axis-1 的 yAxisID。

对于那些还没有看过带有两个 Y 轴的图表的人，I've prepared a simple example。

所以我的问题是 Chart.js 2 是否可以做到这一点？

Answer 1

参考文献：

Chartjs Docs: Tooltip Configuration - Interaction Modes

mode : index - Finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item is used to determine the index.

更新图表选项以包括工具提示配置。将 mode 设置为 index

tooltips : {
    mode : 'index'
},

更新后的选项如下所示。

const CHART_OPTIONS = {
  tooltips : {
    mode : 'index'
  },
  scales:
  {
    xAxes: [{
      ticks: {
        display: false,
      },
    }],
    yAxes: [
      {
        type: 'linear',
        id: 'y-axis-0',
        display: false,
        position: 'left',
      },
      {
        type: 'linear',
        id: 'y-axis-1',
        display: false,
        position: 'right',
      },
    ],
  },
};

Check updated sample which include tooltips mode set to index

是否可以使用 ChartJS 2 将两个 Y 轴组合成一个工具提示？

Is it possible to combine two Y axes into a single tooltip with ChartJS 2?

chart.js

chart.js2