如何用Chart.js v2.7.2限制X轴数据点并实现横向滚动

嘿，我懂你这会儿的头疼——用Chart.js v2.7.2做图表时，X轴20-30个动态标签挤成一团，设置maxTicksLimit:10完全没效果，对吧？这是因为类别型X轴（你的标签是城市名称这类字符串）的ticks.maxTicksLimit在v2.7.2版本里并不生效，这个版本的类别轴默认会强制显示所有标签，直接忽略这个配置。下面给你两个关键解决步骤，既能控制标签数量，又能实现横向滚动：

一、手动控制X轴标签显示数量 #

我们可以用ticks.callback函数来过滤标签，只显示指定数量的标签（比如10个）。核心思路是计算标签的显示间隔，只让索引符合间隔条件的标签显示出来：

function drawChart() {
    passings = ["NEWYORK","EDISON","Phili", /* 你的其他20+个标签 */];
    // 假设你的数据值存在values数组里
    var values = [12, 19, 3, /* 对应标签的数据 */];
    
    var ctx = document.getElementById('yourChartId').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar', // 或者你用的其他图表类型
        data: {
            labels: passings,
            datasets: [{
                label: 'Passing Data',
                data: values,
                // 你的数据集样式配置
            }]
        },
        options: {
            responsive: false, // 先关闭响应式，为滚动做准备
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    ticks: {
                        callback: function(value, index, values) {
                            // 计算显示间隔：总标签数 / 想要显示的标签数（这里是10）
                            var displayInterval = Math.ceil(values.length / 10);
                            // 只显示索引是间隔倍数的标签
                            return index % displayInterval === 0 ? value : '';
                        },
                        maxRotation: 0, // 可选：让标签不旋转，更整洁
                        minRotation: 0
                    }
                }],
                yAxes: [{
                    // 你的Y轴配置
                }]
            }
        }
    });
}

二、实现横向滚动效果 #

要让图表支持横向滚动，需要把Chart.js的canvas放在一个带横向滚动的容器里，同时手动设置canvas的宽度：

1. 首先修改PrimeFaces的页面代码，给图表容器加滚动样式：

<div style="width: 100%; overflow-x: auto;">
    <p:chart id="yourChartId" type="bar" widgetVar="chartWidget" />
</div>

2. 然后在Chart.js的配置里，关闭响应式，手动设置canvas的宽度（比如每个标签分配80px宽度，总宽度=标签数*80）：

options: {
    responsive: false,
    maintainAspectRatio: false,
    width: passings.length * 80, // 每个标签分配80px，可根据需求调整
    height: 400, // 固定图表高度
    // 其他配置...
}

这样一来，容器会因为canvas宽度超过自身宽度而出现横向滚动条，同时X轴只显示10个左右的标签，不会再拥挤不堪。

另外要注意：因为你用的是PrimeFaces，可能需要在PrimeFaces的图表渲染完成后再执行自定义的Chart.js配置，或者直接通过widgetVar获取图表实例来修改配置。比如：

PF('chartWidget').chart.options.scales.xAxes[0].ticks.callback = function(value, index, values) {
    var displayInterval = Math.ceil(values.length / 10);
    return index % displayInterval === 0 ? value : '';
};
PF('chartWidget').chart.update();

这样就能确保PrimeFaces生成的图表应用了你的自定义配置。

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