如何隐藏ChartJS散点图中的伪图例/交互提示框

使用如下配置和CSV数据创建了散点图，想要移除图表默认的伪图例/交互键，但尝试将几乎所有可见性相关参数设为false后都无效。

代码示例：

<canvas id="myChart"></canvas>
<script>
    // 获取CSV数据
    const chartData = "/static/csv/result.csv";
    d3.csv(chartData).then(function(data) {
        console.log(data)
        const x = data.map(function(d) {
            return d.Algorithm
        })
        const y = data.map(function(d) {
            return d.Cost
        })
        const z = data.map(function(d) {
            return d.Time
        })

        const ctx = document.getElementById('myChart').getContext('2d');

        const dataForConfig = {
            datasets: x.map((ds, i) => {
                return {
                    label: x[i],
                    data: [{
                        x: y[i],
                        y: z[i]
                    }],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    // 根据算法类型设置点的边框颜色
                    borderColor: function(context) {
                        var type = context.dataset.label;
                        return type == "Algorithm" ? 'red' :
                            type == "Knapsack" ? 'blue' :
                            type == "Recursive Knapsack" ? 'green' :
                            type == "Static" ? 'purple' :
                            type == "Dynamic" ? "brown" : 'black'
                    },
                    borderWidth: 1
                }
            })
        }

        const myChart = new Chart(ctx, {
            type: 'scatter',
            data: dataForConfig,
            labels: {
                visible: false
            },
            options: {
                legend: {
                    display: false
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 0.05,
                    }
                }
            }
        });
    })
</script>

图表截图：

请问需要设置哪些选项才能隐藏该伪图例/交互键？

问题核心是你把每个数据点都单独创建了一个Dataset，这会让Chart.js默认生成大量冗余的交互元素（包括hover提示框里的条目）。下面提供两种解决思路：

思路1：合并为单个Dataset（推荐） #

这是更合理的做法，所有点放在同一个Dataset中，通过回调函数为每个点设置对应颜色，同时彻底避免多Dataset带来的冗余交互：

<canvas id="myChart"></canvas>
<script>
    const chartData = "/static/csv/result.csv";
    d3.csv(chartData).then(function(data) {
        // 整理成单个Dataset需要的格式，保留算法类型用于颜色判断
        const chartDatasetData = data.map(d => ({
            x: d.Cost,
            y: d.Time,
            algorithm: d.Algorithm
        }));

        const ctx = document.getElementById('myChart').getContext('2d');

        const myChart = new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [{
                    label: "算法性能", // 不需要可留空
                    data: chartDatasetData,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: function(context) {
                        const type = context.dataset.data[context.dataIndex].algorithm;
                        return type == "Algorithm" ? 'red' :
                            type == "Knapsack" ? 'blue' :
                            type == "Recursive Knapsack" ? 'green' :
                            type == "Static" ? 'purple' :
                            type == "Dynamic" ? "brown" : 'black';
                    },
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false // 关闭图例
                },
                tooltip: {
                    // 若不需要hover提示框，直接关闭：enabled: false
                    // 也可自定义提示内容，只显示必要信息
                    callbacks: {
                        label: function(context) {
                            const item = context.dataset.data[context.dataIndex];
                            return `${item.algorithm}: 成本=${item.x}, 时间=${item.y}`;
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 0.05,
                    }
                }
            }
        });
    })
</script>

思路2：保留多Dataset，关闭所有交互元素 #

如果一定要保留当前多Dataset结构，需要关闭tooltip并禁用所有交互模式：

const myChart = new Chart(ctx, {
    type: 'scatter',
    data: dataForConfig,
    options: {
        legend: {
            display: false
        },
        tooltip: {
            enabled: false // 关闭hover提示框
        },
        interaction: {
            mode: 'none', // 禁用所有交互模式
            intersect: false
        },
        scales: {
            y: {
                beginAtZero: true,
                stepSize: 0.05,
            }
        }
    }
});

内容的提问来源于stack exchange，提问作者cj3IsAlwaysTaken