4

假设我有两个 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',
      },
    ],
  },
};

图表数据分别指定ayAxisID和。y-axis-0y-axis-1

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

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

4

1 回答 1

9

参考：

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

mode : index - 在同一索引处查找项目。如果 intersect 设置为 true，则第一个相交项用于确定数据中的索引。如果 intersect 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',
      },
    ],
  },
};

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

于 2016-12-04T04:18:38.563 回答