Question

假设我有两个Y轴，标记为“foo”和“bar”。这些轴对应于沿相同间隔的点，例如，在过去的12周里，每周聚集的foos和酒吧。理想情况下，你会沿着折线图鼠标悬停其中一个点，工具提示会显示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轴的图表的人I've prepared a simple example。

所以我的问题是，如果可以使用Chart.js 2吗？

Answer 1

参考文献：

Chartjs Docs: Tooltip Configuration - Interaction Modes

模式：索引 - 查找同一索引处的项目。如果相交设置为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',
      },
    ],
  },
};

Check updated sample which include tooltips mode set to index

是否可以将两个Y轴组合成ChartJS 2的单个工具提示？

1 个答案: