Question

工具提示会在图例和标签上显示如何隐藏它。

正在寻找建议。

这将产生以下代码（按下下面的“运行代码段”按钮）。

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Bar Chart</title>
<script src="https://www.chartjs.org/dist/2.9.2/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/master/utils.js"></script>
</head>

<body>
<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'green',
            borderColor: 'green',
            borderWidth: 1,
            data: [1000, 2000, 3000, 4000, 5000, 6000, 7500]
        }, {
            label: 'Dataset 2',
            type: 'line',
            fill: false,
            backgroundColor: 'red',
            borderColor: 'red',
            borderWidth: 2,
            data: [1060, 2110, 3098, 4010, 4020, 5010, 3030, ]
        }]
    };
    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });
    };
</script>
</body>

</html>

```

Answer 1

请检查此内容（标签悬停时不显示工具提示）：

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Bar Chart</title>
<script src="https://www.chartjs.org/dist/2.9.2/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/master/utils.js"></script>
</head>

<body>
<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            tooltip:false,
            backgroundColor: 'green',
            borderColor: 'green',
            borderWidth: 1,
            
            data: [1000, 2000, 3000, 4000, 5000, 6000, 7500]
        }, {
            label: 'Dataset 2',
            type: 'line',
            fill: false,
            backgroundColor: 'red',
            borderColor: 'red',
            borderWidth: 2,
            data: [1060, 2110, 3098, 4010, 4020, 5010, 3030, ]
        }]
     
};
    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }, tooltips: {
         intersect : false,
       filter: function (tooltipItem) {
            return tooltipItem.datasetIndex === 1;
        }
    }
            }
        });
    };
</script>
</body>

</html>

```

ChartJS工具提示问题

1 个答案: