Chart.js के लिए डेटा बिंदु से आगे टूलटिप ले जाएं?

Question

मैंने आज चार्ट.जेएस के साथ गड़बड़ करना शुरू कर दिया, और मैं वास्तव में अपने आप जैसे जावास्क्रिप्ट शुरुआती के लिए समझना कितना आसान समझ रहा हूं।

मैं टूलटिप और ग्राफ पर डेटा बिंदु के बीच क्षैतिज कुछ अंतर जोड़ना चाहता हूं। डिफ़ॉल्ट रूप से, कैरेट बिंदु डेटा बिंदु को छूता है। मेरे द्वारा इसका निर्धारण नहीं किया जा सकता। मुझे पता है कि position विकल्प है, लेकिन मुझे यह नहीं पता कि इसका उपयोग कैसे किया जाता है। मैंने tooltips: { x } विकल्प का उपयोग करने का भी प्रयास किया लेकिन कोई भाग्य नहीं। अनुमान लगा रहा हूं कि मैं गलत समझ रहा हूं कि इसके लिए क्या है।

नीचे क्या मैं अब तक एक चार्ट के लिए है ...

धन्यवाद, यह सराहना करते हैं!

//Global Chart.js options 
 
Chart.defaults.global.defaultFontFamily = 'Lato'; 
 
Chart.defaults.global.elements.responsive = true; 
 
Chart.defaults.global.tooltips.xPadding = 10; 
 
Chart.defaults.global.tooltips.yPadding = 10; 
 
Chart.defaults.global.tooltips.titleMarginBottom = 10; 
 
Chart.defaults.global.tooltips.position = 'average'; 
 

 
//Individual chart config 
 
var ctx = "myChart"; 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    options: { 
 
    title: { 
 
     display: true, 
 
     text: 'Precision-Recall Curve', 
 
    }, 
 
    layout: { 
 
     padding: 32 
 
    }, 
 
    tooltips: { 
 
     x: 20 
 
    }, 
 
    }, 
 
    data: { 
 
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'], 
 
    datasets: [{ 
 
     label: 'Precision', 
 
     data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18], 
 
     borderColor: '#1abc9c', 
 
     backgroundColor: 'RGBA(26, 188, 156, .4)', 
 
     pointBorderColor: "#4BC0C0", 
 
     pointBackgroundColor: "#fff", 
 
     pointHitRadius: 10 
 
    }, { 
 
     label: 'Recall', 
 
     data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93], 
 
     borderColor: '#34495e', 
 
     backgroundColor: 'RGBA(52, 73, 94, .3)', 
 
     pointBorderColor: "#34495e", 
 
     pointBackgroundColor: "#fff", 
 
     pointHitRadius: 10 
 
    }] 
 
    } 
 
});

<div class="container"> 
 
    <div> 
 
    <canvas id="myChart"></canvas> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

Answer 1

मैं पास कुछ है, टूलटिप्स एक position जो एक समारोह Chart.Tooltip.positioners में संग्रहीत के लिए एक उपनाम है स्वीकार कर सकते हैं। यह फ़ंक्शन टूलटिप के लिए x और y स्थिति देता है।

आप ऑफ़सेट पर एक्स समायोजित करने के लिए एक कस्टम जोड़ सकते हैं।

एकमात्र मुद्दा यह है कि टूलटिप के एक्स लेआउट (बाएं/दाएं दिशा) को समायोजित करके अर्थ बदल सकता है कि उपकरण टिप आधे रास्ते से ऊपर या आधे रास्ते से नीचे है तो x को समायोजित करें बीच में टूलटिप पर इसका लेआउट स्विच करता है, यह गलत दिशा में ऑफसेट होने के कारण अजीब लगेगा।

यह टूलटिप की चौड़ाई को जानकर और इसे ध्यान में रखकर तय किया जा सकता है लेकिन फ़ंक्शन को प्रदान किए गए डेटा को देखकर यह नहीं दिया जा सकता है।

वैसे भी एक जवाब यह आपको इस प्रक्रिया का सबसे और आप/किसी को उस कष्टप्रद अंतिम भाग

//Global Chart.js options 
 
Chart.defaults.global.defaultFontFamily = 'Lato'; 
 
Chart.defaults.global.elements.responsive = true; 
 
Chart.defaults.global.tooltips.xPadding = 10; 
 
Chart.defaults.global.tooltips.yPadding = 10; 
 
Chart.defaults.global.tooltips.titleMarginBottom = 10; 
 
Chart.defaults.global.tooltips.position = 'average'; 
 

 
//register custome positioner 
 
Chart.Tooltip.positioners.custom = function(elements, position) { 
 
    if (!elements.length) { 
 
     return false; 
 
    } 
 
    var offset = 0; 
 
    //adjust the offset left or right depending on the event position 
 
    if (elements[0]._chart.width/2 > position.x) { 
 
     offset = 20; 
 
    } else { 
 
     offset = -20; 
 
    } 
 
    return { 
 
     x: position.x + offset, 
 
     y: position.y 
 
    } 
 
    } 
 
    //Individual chart config 
 
var ctx = "myChart"; 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    options: { 
 
    title: { 
 
     display: true, 
 
     text: 'Precision-Recall Curve', 
 
    }, 
 
    layout: { 
 
     padding: 32 
 
    }, 
 
    tooltips: { 
 
     //use our new custom position 
 
     position: 'custom' 
 
    }, 
 
    }, 
 
    data: { 
 
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'], 
 
    datasets: [{ 
 
     label: 'Precision', 
 
     data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18], 
 
     borderColor: '#1abc9c', 
 
     backgroundColor: 'RGBA(26, 188, 156, .4)', 
 
     pointBorderColor: "#4BC0C0", 
 
     pointBackgroundColor: "#fff", 
 
     pointHitRadius: 10 
 
    }, { 
 
     label: 'Recall', 
 
     data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93], 
 
     borderColor: '#34495e', 
 
     backgroundColor: 'RGBA(52, 73, 94, .3)', 
 
     pointBorderColor: "#34495e", 
 
     pointBackgroundColor: "#fff", 
 
     pointHitRadius: 10 
 
    }] 
 
    } 
 
});

<div class="container"> 
 
    <div> 
 
    <canvas id="myChart"></canvas> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>