首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >用ChartJS 2将两个Y轴组合成一个工具提示是可能的吗?

用ChartJS 2将两个Y轴组合成一个工具提示是可能的吗?
EN

Stack Overflow用户
提问于 2016-11-21 23:33:19
回答 1查看 2.5K关注 0票数 5

假设我有两个Y轴,标记为"foo“和"bar”。这些轴对应于沿同一时间间隔的点,例如,在过去12周内,每周的foos和bar的总和。理想情况下,您可以沿着线图表中的其中一个点进行鼠标操作,工具提示将显示有关foo和bar的每周数据;如果您没有多个Y轴,这就是它的工作方式。在实践中,您可以在单个点上鼠标,只查看该特定点的数据。

为了清晰起见,我的图表选项是这样的:

代码语言:javascript
代码运行次数:0
运行
复制
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 of y-axis-0y-axis-1

对于那些还没有看到有两个Y轴的图表的人来说,我准备了一个简单的例子

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-04 04:18:38

参考文献:

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

模式:索引-在同一索引中查找项。如果intersect设置为true,则使用第一个交叉项来确定数据中的索引。如果相交为false,则使用最近的项来确定索引。

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

代码语言:javascript
代码运行次数:0
运行
复制
tooltips : {
    mode : 'index'
},

更新后的选项将如下所示。

代码语言:javascript
代码运行次数:0
运行
复制
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',
      },
    ],
  },
};

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

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40731386

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档