Javascript chartjs将鼠标悬停在折线图上显示点

我正在使用Chartjs v.1.0.2，并试图设置一个点，使其仅出现在悬停在图表上。之后，应将其移除。我通过改变对象的值来显示它，但它不是流体运动，也不总是显示点。这也不会在悬停时隐藏它。 当鼠标还没有结束时，它怎么可能是流动的和隐藏的

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

};

window.onload=function（）{
var ctx=$（“#图表1”）.get（0.getContext（“2d”）；
var chart1=新图表（ctx）.Line（数据1，选项）；
$（“#图表1”）。悬停（函数（e）{
var activebar=chart1.getPointsAtEvent（e）；
活动条[0]。显示=true；
//console.log（activebar[0]）；
图表1.update（）；
});
};
变量数据1={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（95186,88,0.7）”，
strokeColor:“rgba（95186,88,1）”，
点颜色：“rgba（95186,88,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
}
]
};
变量选项={
回答：是的，
贝塞尔曲线：错，
scaleShowLabels:false，
scaleFontSize:0，
点点：错，
scaleBeginAtZero:对，
缩放水平线：false，
scaleShowVerticalLines：没错，
scaleGridLineColor:“rgba（232232）”，
showTooltips:true，
自定义工具提示：函数（工具提示）{
var tooltipEl=$（“#chartjs工具提示”）；
如果（！工具提示）{
工具管道({
不透明度：0
});
返回；
}
工具管道removeClass（“上下”）；
tooltipEl.addClass（tooltip.yAlign）；
//拆分标签和值，并在此处创建自己的工具提示
var parts=tooltip.text.split（“：”）；
var innerHtml=''+parts[0]。trim（）+：'+parts[1]。trim（）+''；
html（innerHtml）；
工具管道({
不透明度：1，
左：tooltip.chart.canvas.offsetLeft+tooltip.x+'px'，
顶部：tooltip.chart.canvas.offsetTop+tooltip.y+'px'，
fontFamily:tooltip.fontFamily，
fontSize:tooltip.fontSize，
fontStyle:tooltip.fontStyle，
});
}
};

---

简化的

尝试使用

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

---

编辑：以下解决方案适用于Chart.js v1.0.2（提出此解决方案时的最新版本）。请参阅为Chart.js v2.x.x提供解决方案的

---

不久前，我遇到了类似的情况，并通过将默认点设置为“不可见”来解决此问题，如下所示：

• 将点半径设置为1
• 将pointStrokeColor设置为白色，alpha设置为0

上面的两个步骤使默认点非常小，这与透明点笔划相结合，使默认点不可见。现在，如果我们将pointDotStrokeWidth设置得足够大，就可以实现所需的悬停效果。i、 e

• 将pointDotStrokeWidth设置为更大的值（我使用了8）
• 设置所需的点颜色，点高亮填充，点高亮笔划

[注：制作pointColor 透明，但如果要打印多个数据集，则 工具提示不会在数据旁边显示相应的线颜色 价值。]

下面的示例（或者您可以签出此示例）：

var数据={
标签：[“点0”、“点1”、“点2”、“点3”、“点4”]，
数据集：[
{
标签：“我的图表”，
fillColor:“rgba（87167134,0.2）”，
strokeColor:“rgba（87167134,1）”，
pointColor:“rgba（87167134,1）”，
pointStrokeColor:“rgba（255，255，255，0）”，
pointHighlightFill:“rgba（87167134,0.7）”，
pointHighlightStroke:“rgba（87167134,1）”，
数据：[5,39,109,19,149]
}
]
};
var ctx=document.getElementById（“我的图表”）.getContext（“2d”）；
myChart=新图表（ctx）.Line（数据{
回答：是的，
贝塞尔曲线：错，
datasetFill:true，
点半径：1，
pointDotStrokeWidth:8，
PointHit检测半径：20，
});
使用Chart.js v2.6.0测试

全局设置将起到以下作用：

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

或直接在图表配置中：

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

和数据集的点设置


点的初始颜色应该是透明的
悬停颜色必须设置为所需的颜色

e、 g


window.onload=function（）{
常量模式='索引'；
const intersect=false；
常量配置={
键入：“行”，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
边框颜色：“rgb（255，99，132）”，
背景颜色：“rgb（255，99，132）”，
数据：[10,30,46,2,8,50,0]，
填充：假，
pointBorderColor:“rgba（0,0,0,0）”，
pointBackgroundColor:“rgba（0,0,0,0）”，
pointHoverBackgroundColor:“rgb（255，99，132）”，
pointHoverBorderColor:“rgb（255，99，132）”，
}, {
标签：“我的第二个数据集”，
边框颜色：“rgb（54162235）”，
背景颜色：“rgb（54162235）”，
数据：[7,49,46,13,25,30,22]，
填充：假，
pointBorderColor:“rgba（0,0,0,0）”，
pointBackgroundColor:'rgba（0,0,0,0）
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)'}],...