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

Question

假设我有两个Y轴，分别标记为“ foo”和“ bar”。这些轴对应于沿着相同间隔的点，例如最近12周中每周的foos和bar聚合。理想情况下，您将鼠标悬停在折线图上的这些点之一上，工具提示将显示有关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',
      },
    ],
  },
};

图表数据规定一个yAxisID的y-axis-0和y-axis-1分别。

对于那些还没有看到带有两个Y轴的图表的人，我准备了一个简单的示例。

所以我的问题是，这可以用Chart.js 2完成吗？

Answer 1

参考文献：

Chartjs文档：工具提示配置-交互模式

模式：索引 -查找具有相同索引的项目。如果相交设置为true，则第一个相交项用于确定数据中的索引。如果相交为false，则使用最接近的项确定索引。

更新图表选项以包括工具提示配置。设置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',
      },
    ],
  },
};

检查更新的样本，其中包括设置为索引的工具提示模式