首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >修改Chart.js 2中条形图的X轴标签

修改Chart.js 2中条形图的X轴标签
EN

Stack Overflow用户
提问于 2017-04-12 12:05:08
回答 1查看 4K关注 0票数 1

我正在使用ChartJS构建一个条形图。我的图表中包含了一年中每周一条。例如,我希望每个条形的工具提示显示"Week 15 (4月10日-4月16日)“,而x轴中的相应标签应该只显示周号,因此"15”。

这个回答精确地描述了我想要完成的任务,尽管我使用的是条形图,而不是散点图。我在条形图上尝试了这个方法,并从我添加到数据集中的标签("Week 15 (4月10日-4月16日)“--> "15")中提取了星期号。然而,userCallback函数用值"15“覆盖x轴标签和工具提示标签。有人能告诉我如何只修改每个条形的x轴标签(而不影响工具提示标签)或建议一种替代方法吗?

编辑:篡改我的代码:https://jsfiddle.net/96z57gqf/。X轴标签是正确的,但我需要条形工具提示来保持原始值(“第12周”、“第13周”等等)。

代码语言:javascript
复制
xAxes: [{
  ticks: {
    userCallback: function(value, index, values) {
      return value.replace("Week ","");
    }
  }
}]

EDIT2 2/解决方案:参见https://jsfiddle.net/3ft4wrL9/。从维诺德的回答中,我修改了我的选择,包括:

代码语言:javascript
复制
tooltips: {
    mode: 'index',
    intersect: true,
    callbacks: {
      title: function(tooltipItem, data) {
        return data["labels"][tooltipItem[0]["index"]];
      }
    }
  },
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-12 12:14:30

如果您使用的是chart.js 2,那么您可以使用工具提示回调方法文档化的这里内部选项,以便自定义您的工具提示。

代码语言:javascript
复制
tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                //TODO return what you want using value of tooltipItem and data 
            }
        }
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43369039

复制
相关文章

相似问题

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