在元素

Question

我正在使用Chartjs v.1.0.2并试图将点点设置为仅悬停在当前点上。同样的问题是当我使用悬停或鼠标悬停时。当前点可以在getPointsAtEvent(e);找到，但它只有在我将鼠标从画布中移出然后将其返回时才有效，而不是在我在画布内移动时。每次我在canvas元素中移动鼠标时，它如何工作？

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,
        });
    }

};

简化fiddle

Answer 1

将pointDot选项设置为true。

...
pointDot : true,
...

然后将系列的pointColor和pointStrokeColor设置为透明，将pointHighlightFill和pointHighlightStroke设置为非透明值，如此

...
    pointColor: "rgba(0,0,0,0)",
    pointStrokeColor: "rgba(0,0,0,0)",
    pointHighlightFill: "rgba(95,186,88,1)",
    pointHighlightStroke: "rgba(95,186,88,1)",
...

小提琴 - http://jsfiddle.net/p1zgp5ys/

Answer 2

好的，我遇到了你的问题，只需将pointDot值设置为true，如下所述：

pointDot : true,

var 选项

中的

就是这样:)）