Przesuń dalej etykietkę narzędzia od punktu danych dla pliku Chart.js?

Question

Zacząłem dzisiaj bawić się z Chart.js i jestem pod wrażeniem jak łatwo to zrozumieć, nawet dla początkującego javascript, takiego jak ja.

Chciałbym dodać kilka odstępów w poziomie między etykietką narzędzi a punktem danych na wykresie. Domyślnie punkt przewijania dotyka punktu danych. Nie mogę tego rozgryźć. Wiem, że jest opcja position, ale nie do końca rozumiem, jak jest używana. Próbowałem również użyć opcji tooltips: { x }, ale nie było też szczęścia. Zgaduję, że nie rozumiem do czego to służy.

Poniżej jest to, co mam tak daleko na jednym wykresie ...

Dzięki, doceniam to!

//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

mam coś podobnego, podpowiedzi może zaakceptować position który jest aliasem dla funkcji przechowywanych w Chart.Tooltip.positioners. Ta funkcja zwraca pozycję x i y dla etykiety narzędzia.

Możesz dodać niestandardowy, aby dopasować x w przesunięciu.

Jedynym problemem jest to, że zmieniając układ x układ (kierunek w lewo/w prawo) etykiety narzędzia może się zmienić, co oznacza, że ​​nawet po wykonaniu pracy, jeśli końcówka narzędzia znajduje się poniżej połowy lub powyżej połowy drogi, regulując x, to zmienia jego wygląd na etykiecie narzędzia w środku będzie wyglądał dziwnie, ponieważ jest przesunięty w niewłaściwym kierunku.

To może być ustalona przez znając szerokość podpowiedzi i biorąc to pod uwagę, ale pominie danych przekazanych do funkcji nie jest to podane.

Zresztą pozostawiając to jako odpowiedź to dostaje większość drogi tam i/ktoś może być w stanie dowiedzieć się, jak pozbyć się tego uciążliwego ostatniej części

//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>