ChartJS如何隐藏未勾选切换的图表对应的时间刻度标签

修复方案 #

你当前的代码存在两个基础问题：

• datasets 中的 data 字段多嵌套了一层数组，正确格式应为直接存放坐标对象的一维数组
• 未给x轴指定时间类型，也没有配置自适应显示的相关规则

以下是完整修改后的可运行代码：

var ctx = document.getElementById('priceChart').getContext('2d');
var priceChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                label: 'Price150s',
                // 去掉多余的外层数组
                data: [
                    {"x": "20:32:39", "y": 4325.04},
                    {"x": "20:32:42", "y": 4324.91},
                    {"x": "20:32:45", "y": 4325.17},
                    {"x": "20:32:48", "y": 4325.02}
                ],
                tension: 0.2,
                borderColor: 'rgb(231,62,62)'
            },
            {
                label: 'Price25m',
                // 这里替换为你实际25分钟跨度的坐标数据
                data: [
                    {"x": "20:20:00", "y": 4324.04},
                    {"x": "20:32:42", "y": 4324.91},
                    {"x": "20:45:00", "y": 4325.57}
                ],
                tension: 0.2,
                borderColor: 'rgb(62,122,231)'
            }
        ]
    },
    options: {
        responsive: true,
        legend: {
            display: true,
            // 重写图例点击回调
            onClick: function(e, legendItem) {
                var index = legendItem.datasetIndex;
                var ci = this.chart;
                var meta = ci.getDatasetMeta(index);
                // 切换当前数据集可见性
                meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                // 收集所有可见数据集的x值计算极值
                var allX = [];
                ci.data.datasets.forEach(function(ds, dsIndex) {
                    var dsMeta = ci.getDatasetMeta(dsIndex);
                    if (!dsMeta.hidden) {
                        ds.data.forEach(function(point) {
                            // 转换时间字符串为时间戳方便比较
                            var timeParts = point.x.split(':').map(Number);
                            allX.push(timeParts[0] * 3600 + timeParts[1] * 60 + timeParts[2]);
                        });
                    }
                });
                if (allX.length > 0) {
                    var minX = Math.min(...allX);
                    var maxX = Math.max(...allX);
                    // 转换回时间字符串格式设置给x轴
                    ci.options.scales.x.min = new Date(0, 0, 0, Math.floor(minX/3600), Math.floor((minX%3600)/60), minX%60).toTimeString().slice(0,8);
                    ci.options.scales.x.max = new Date(0, 0, 0, Math.floor(maxX/3600), Math.floor((maxX%3600)/60), maxX%60).toTimeString().slice(0,8);
                }
                // 重绘图表
                ci.update();
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    parser: 'HH:mm:ss',
                    unit: 'second',
                    displayFormats: {
                        second: 'HH:mm:ss'
                    }
                },
                title: {
                    display: true,
                    text: '时间'
                }
            },
            y: {
                beginAtZero: false
            }
        }
    }
});

核心逻辑说明 #

1. 首先修复了数据格式错误，移除了data字段多余的外层嵌套数组
2. 给x轴指定time类型，配置时间解析格式匹配你的HH:mm:ss格式字符串
3. 重写图例点击回调，切换数据集可见性时，遍历所有可见数据集提取x坐标值，计算出当前可见范围的最小、最大时间
4. 把计算得到的时间范围赋值给x轴的min、max属性，调用update()重绘图表后，x轴就只会显示当前可见数据集对应的时间标签，不会残留隐藏数据集的刻度

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