Chart.js静态图表配置：禁用交互元素实现无交互折线图

以下是满足需求的完整代码，已配置好所有禁用交互和额外元素的选项：

<canvas class="w-100" id="myChartfill"></canvas>
<script>
    chartData4 = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        datasets: [{
            data: [10, 59, 80, 81, 56, 55, 40],
            fill: true,
            backgroundColor: 'rgb(75, 192, 192)',
            tension: 0.1,
            borderColor: 'rgb(75, 192, 192)',
            pointRadius: 0
        }]
    };
    const myChartfill = document.getElementById('myChartfill');
    
    if(myChartfill!=null){
        new Chart(myChartfill, {
            type: 'line',
            data: chartData4,
            options: {
                interaction: {
                    mode: 'none'
                },
                plugins: {
                    tooltip: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    }
                },
                scales: {
                    x: {
                        display: false
                    },
                    y: {
                        display: false
                    }
                },
                animation: false
            }
        })
    }
</script>

关键配置说明 #

• interaction.mode: 'none'：禁用所有交互行为（hover、点击等）
• plugins.tooltip.enabled: false：关闭提示框
• plugins.legend.enabled: false：隐藏图例
• scales.x/y.display: false：隐藏坐标轴及刻度标签
• animation: false：关闭加载动画，直接展示静态图表
• pointRadius: 0：隐藏折线上的数据点，优化视觉简洁度（可选）

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