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

我正在使用ChartJS来构建条形图。我的图表包含一年中每周的一个栏。例如，我希望每个栏的工具提示都显示“第15周（4月10日 - 4月16日）”，而x轴上的相应标签应该只显示星期编号，所以“15”。在Chart.js中修改条形图的X轴标签2

这个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/SOLUTION：见https://jsfiddle.net/3ft4wrL9/。从下面的维诺德的回答，我修改了我的选择，包括：

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

来源

2017-04-12 André de Brito

你可以在小提琴中发布你的代码吗？ –

请提供您的代码 –

为问题描述添加代码。 –

-2

如果使用chart.js之2，那么您可以使用工具提示的回调方法，以记录here像这里面的选项可自定义的工具提示

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

来源

2017-04-12 12:14:30

我不知道这将解决我的问题。问题是我想在工具提示中提供比x轴标签更多的信息，所以如果按照我想要的方式（仅使用星期编号）来格式化标签，那么我将没有足够的信息来构建工具提示字符串（即“第15周（4月10日 - 4月16日）”）。除非我可以存储元数据，否则我可以访问您提到的函数内部并使用它来构建工具提示字符串。 –

尝试查看tooltipItem，数据它肯定会有足够的数据，你可以做的，如果你张贴你的数据，可以帮助你有周信息或你想要生成它的运行时间liek 15周（4月10日至4月16）是与你在数据中，或者你想生成运行时间 –

@AndrédeBrito你有定义星期至今？ –

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

回答

相关问题