【问题标题】:Modifying the X-Axis Labels of a Bar chart in Chart.js 2在 Chart.js 2 中修改条形图的 X 轴标签
【发布时间】:2017-04-12 12:05:08
【问题描述】:

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

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

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

xAxes: [{
  ticks: {
    userCallback: function(value, index, values) {
      return value.replace("Week ","");
    }
  }
}]

EDIT2/解决方案:见https://jsfiddle.net/3ft4wrL9/。根据下面 Vinod 的回答,我修改了我的选项以包括:

tooltips: {
    mode: 'index',
    intersect: true,
    callbacks: {
      title: function(tooltipItem, data) {
        return data["labels"][tooltipItem[0]["index"]];
      }
    }
  },

【问题讨论】:

  • 你能把你的代码贴在小提琴里吗?
  • 请提供您的代码
  • 在问题描述中添加了代码。
  • @AndrédeBrito 看到我的回答你可以使用这样的工具提示jsfiddle.net/96z57gqf/2 使用你的格式

标签: javascript chart.js chart.js2


【解决方案1】:

如果您使用的是chart.js 2,那么您可以在选项中使用记录在here 中的工具提示回调方法来自定义您的工具提示

tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                //TODO return what you want using value of tooltipItem and data 
            }
        }
    }

【讨论】:

  • 我不确定这是否能解决我的问题。问题是我希望工具提示中的信息比 x 轴标签中的信息多,所以如果我按照我想要的方式格式化标签(只有周数),那么我将没有足够的信息来构建工具提示字符串(即“第 15 周(4 月 10 日 - 4 月 16 日)”)。当然,除非我有办法存储元数据,然后我可以在您提到的函数内部访问并使用它来构建工具提示字符串。
  • 尝试查看 tooltipItem,如果您发布您的数据,可以帮助您获得 Week 的信息,或者您想要生成它的运行时间,它肯定有足够的数据可以做第 15 周(4 月 10 日至 4 月 16 日)是你在数据中或者你想生成运行时
  • @AndrédeBrito 你有星期至今的定义吗?
  • 好的,这行得通,谢谢!我需要使用“标题”而不是“标签”来完成我想要的。这是我原来的小提琴的更新:jsfiddle.net/3ft4wrL9
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-10-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-24
  • 1970-01-01
相关资源
最近更新 更多