chartjs 在折線圖上顯示 hover 上的點

Question

我正在使用 Chartjs v.1.0.2 並嘗試設置一個點，使其僅出現在圖表上方的 hover 上。 之后它應該被刪除。 我設法通過更改 object 值來展示它，但它不是流暢的運動，而且它並不總是顯示點。 這也就hover上隱藏不出來了。 鼠標沒結束怎么會流暢隱藏呢？

window.onload = function(){

        var ctx = $("#chart1").get(0).getContext("2d");
                var chart1 = new Chart(ctx).Line(data1, options);


                $("#chart1").hover(function(e) {
                    var activeBars = chart1.getPointsAtEvent(e); 
                    activeBars[0].display = true;
//                    console.log(activeBars[0]);
                    chart1.update();
                 });

    };

    var data1 = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(95,186,88,0.7)",
                    strokeColor: "rgba(95,186,88,1)",
                    pointColor: "rgba(95,186,88,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
    };



var options = {
    responsive: true,
    bezierCurve : false,
    scaleShowLabels: false,
    scaleFontSize: 0,
    pointDot : false,
    scaleBeginAtZero: true,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: true,
    scaleGridLineColor : "rgba(232,232,232)",
    showTooltips: true,

    customTooltips: function (tooltip) {
        var tooltipEl = $('#chartjs-tooltip');

        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split(":");
        var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
        tooltipEl.html(innerHtml);

        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }

};

簡化的小提琴

Answer 1

使用 Chart.js v2.6.0 測試

全局設置可以解決問題：

Chart.defaults.global.hover.intersect = false;

或者直接在圖表配置中：

options: {
  hover: {
    intersect: false;
  }
}

以及數據集的點設置。

• 點的初始顏色應該是透明的
• 懸停顏色必須設置為所需的顏色

例如

datasets: [{
  label: 'My First dataset',
  borderColor: 'rgb(255, 99, 132)',
  backgroundColor: 'rgb(255, 99, 132)',
  data: [10, 30, 46, 2, 8, 50, 0],
  fill: false,
  pointBorderColor: 'rgba(0, 0, 0, 0)',
  pointBackgroundColor: 'rgba(0, 0, 0, 0)',
  pointHoverBackgroundColor: 'rgb(255, 99, 132)',
  pointHoverBorderColor: 'rgb(255, 99, 132)'}],...

 window.onload = function() { const mode = 'index'; const intersect = false; const config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgb(255, 99, 132)', data: [10, 30, 46, 2, 8, 50, 0], fill: false, pointBorderColor: 'rgba(0, 0, 0, 0)', pointBackgroundColor: 'rgba(0, 0, 0, 0)', pointHoverBackgroundColor: 'rgb(255, 99, 132)', pointHoverBorderColor: 'rgb(255, 99, 132)', }, { label: 'My Second dataset', borderColor: 'rgb(54, 162, 235)', backgroundColor: 'rgb(54, 162, 235)', data: [7, 49, 46, 13, 25, 30, 22], fill: false, pointBorderColor: 'rgba(0, 0, 0, 0)', pointBackgroundColor: 'rgba(0, 0, 0, 0)', pointHoverBackgroundColor: 'rgb(54, 162, 235)', pointHoverBorderColor: 'rgb(54, 162, 235)', }] }, options: { responsive: true, title: { display: true, text: 'Mode: index, intersect = false' }, tooltips: { mode: 'index', intersect: intersect, }, hover: { mode: mode, intersect: intersect }, } }; const ctx = document.getElementById('canvas').getContext('2d'); const chart = new Chart(ctx, config); }

 <canvas id="canvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

Answer 2

編輯：以下解決方案適用於 Chart.js v1.0.2（提出此解決方案時的最新版本）。 請參考這個為 Chart.js v2.xx 提供解決方案的答案

---

不久前我遇到了類似的情況，並通過使默認點點“不可見”來解決這個問題，如下所示：

• 將pointDotRadius設置為 1
• 將pointStrokeColor設置為白色，alpha 設置為 0

以上兩個步驟使默認點點非常小，這與透明點描邊相結合，使默認點點不可見。 現在如果我們讓pointDotStrokeWidth足夠大，我們就可以達到想要的懸停效果。 IE

• 將pointDotStrokeWidth設置為更大的值（我使用了 8）
• 為pointColor 、 pointHighlightFill 、 pointHighlightStroke設置所需的值

[注意：通過使pointColor透明可以實現相同的效果，但如果您要繪制多個數據集，則工具提示不會在數據值旁邊顯示相應的線條顏色。]

下面的示例（或者您可以查看此Fiddle：ChartJS - Show Points on Hover ）：

 var data = { labels: ["Point0", "Point1", "Point2", "Point3", "Point4"], datasets: [ { label: "My Chart", fillColor: "rgba(87, 167, 134, 0.2)", strokeColor: "rgba(87, 167, 134, 1)", pointColor: "rgba(87, 167, 134, 1)", pointStrokeColor: "rgba(255, 255, 255, 0)", pointHighlightFill: "rgba(87, 167, 134, 0.7)", pointHighlightStroke: "rgba(87, 167, 134, 1)", data: [5, 39, 109, 19, 149] } ] }; var ctx = document.getElementById("my_chart").getContext("2d"); myChart = new Chart(ctx).Line(data, { responsive : true, bezierCurve: false, datasetFill: true, pointDotRadius: 1, pointDotStrokeWidth: 8, pointHitDetectionRadius: 20, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <canvas id="my_chart"></canvas>

Answer 3

$("#chart1").mouseover(function(e) {
    chart1.datasets[0].points[0].display = true;
    chart1.update();
 });
$("#chart1").mouseout(function(e) {
    chart1.datasets[0].points[0].display = false;
    chart1.update();
 });

Answer 4

嘗試使用mouseover和mouseout ，如下所示。 同樣，您也可以使用mouseenter和mouseleave方法來處理事件。

$("#chart1").mouseover(function(e) {
                var activeBars = chart1.getPointsAtEvent(e); 
                activeBars[0].display = true;
                chart1.update();
             });

$("#chart1").mouseout(function(e) {
                var activeBars = chart1.getPointsAtEvent(e); 
                activeBars[0].display = false;
                chart1.update();
             });

Answer 5

這是一個六年前的問題，但我認為在 2022 年我們可以使用ChartJS 4.0.1 版。

ChartJS 支持交互行為，它們可以通過interaction 、 hover或圖表配置上的tooltips設置進行配置。

為此，我們將使用hover設置和 select index模式。 此模式在同一索引處查找項目。 如果intersect設置為false ，則使用x方向上最近的項目來確定索引。

這是一個工作片段

 const data = { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] } const options = { maintainAspectRatio: false, elements: { point: { hoverRadius: 6, }, }, hover: { mode: 'index', intersect: false, }, } const config = { type: 'line', data, options, } const $chart = document.getElementById('chart') const chart = new Chart($chart, config)

 <div class="wrapper" style="width: 98vw; height: 180px"> <canvas id="chart"></canvas> </div> <script src="https://unpkg.com/chart.js@4.0.1/dist/chart.umd.js"></script>