在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

回答

相關問題