Chartjs中的所有標籤都在固定位置

一直在尋找這個問題一段時間無濟於事。我想要一種方法來修改特定標籤的位置。例如，我希望圖表上的第二個標籤是「左對齊」的，以便顯示的工具提示不在該線的中心。我想這是不可能的，或者至少不值得工作，所以我真正想做的是渲染某種div，而不是在該div內顯示所有標籤/工具提示。Chartjs中的所有標籤都在固定位置

問題：我使用前導/尾隨節點，所以我使用變通方法來改變節點的可見位置。不幸的是，這也會導致側面標籤被切斷。我希望能夠調整自己的位置。我認爲更簡單的方法是以某種方式在工具提示中指定類名，然後使用其他方法定位該工具提示。

摘要：我希望我的圖表中的所有懸停工具提示都顯示在相同的位置，無論它們存在於哪個圖表中。

編輯：正如您從下圖中看到的，終端節點標籤與圖表的其餘部分截斷。從技術上講，最左邊的標籤將自動對齊，以便將其標籤壓到圖表的可見區域。然而，因爲我有一個幻影節點（允許引導線），所看到的'第一個'節點實際上是第二個節點，這阻止了它進行正確的對齊。

理想情況下，我想要的是標籤顯示在不同的指定位置。

來源

2015-09-28 Rockster160

您可以加入表示將提示應該出現畫面？我對你想要的東西有一個公平的想法，但是一張照片可以說清楚。乾杯! – potatopeelings

@potatopeelings - 添加了我想解決的問題的圖像，沒有時間創建我正在嘗試做的演示...讓我知道如果這是有道理的。 – Rockster160

把一些時間和一個解決方案上來。

圖表爲我們提供了一個.getPointsAtEvent()方法，所以使用它，我可以在懸停位置抓住數據節點，獲取它的標籤，然後在單獨的位置顯示該標籤。

$('.chart').each(function() { 
    var chart = $(this).first().children('canvas')[0], 
     label = $(chart).parents('.chart-container').find('.label-container').find('span'); 
    $(chart) 
    .mousemove(function(evt) { 
     var data_nodes = window.Chart[chart.id].getPointsAtEvent(evt); 
     if (data_nodes.length > 0) { 
     label.html(data_nodes[0].label); 
     label.addClass('label-tooltip'); 
     } else { 
     label.html(''); 
     label.removeClass('label-tooltip'); 
     } 
    }) 
    .mouseleave(function() { 
     label.html(''); 
     label.removeClass('label-tooltip'); 
    }) 
})

抓住每個排行榜中，遍歷它們並找到畫布，我使用存儲工具提示（.label-container）額外股利。將mousemove和mouseleave監聽器添加到圖表。當鼠標移動時，找到結束的數據節點，抓住第一個（即最左邊的一個，即使多個被選中）從該節點獲取標籤，然後用該標籤替換label的html。顯示標籤時，我使用CSS對其進行了格式設置，因此我還將類label-tooltip添加到對其進行設計的標籤中，否則它只是隱藏起來。

結果：

來源

2015-10-06 16:36:06 Rockster160

Chartjs中的所有標籤都在固定位置

回答

相關問題