在ChartJS 2中，是否可以将两个Y轴合并到一个工具提示中？

wxclj1h5 于 2023-08-05 发布在 Chart.js

关注(0)|答案(2)|浏览(167)

假设我有两个Y轴，分别标记为“foo”和“bar”。这些轴对应于沿着相同间隔的点，例如例如在过去12周内的foo和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',
      },
    ],
  },
};

字符串
图表数据分别指定y-axis-0和y-axis-1中的yAxisID。
对于那些还没有看到有两个Y轴的图表的人，I've prepared a simple example。
所以我的问题是，这是否可以用Chart.js 2完成？

chart.js

来源：https://stackoverflow.com/questions/40731386/is-it-possible-to-combine-two-y-axes-into-a-single-tooltip-with-chartjs-2

2条答案

按热度按时间

u0njafvf1#

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

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

型
Check updated sample which include tooltips mode set to index

赞(0）回复(0）举报 2023-08-05

t3irkdon2#

如果工具提示选项不为你工作，如在Nkosi回答中提到的。
尝试使用以下选项。