Question

在为ChartJS创建手动Y轴限制选择器时遇到问题，在Firefox中，我可以将所述更改应用于图表选项，对其进行更新，它将相应地裁剪图表，没有问题：

如所附图像所示，在Y轴边界设置为0到20之间的情况下，行为可以按预期工作。但是，在Google Chrome浏览器中，对于同一张图，第二行变为不可见，但是我仍然可以将鼠标悬停在指向其中并与“幽灵线”互动：

蓝线具有更均匀的数据，该图中的值在0到2 mA之间变化。绿色图形的值在0到5e + 34 mA之间变化。不过，这并不意味着应该有问题，因为它在Firefox中可以正常工作，并且在某种程度上，这些行在Chrome中仍然“存在”。

以下是我应用最小/最大更改的方式：

if(chart.options.scales.yAxes.length <= 1)
        return;

    for(let i=1; i < chart.options.scales.yAxes.length; i++){
        if(chart.options.scales.yAxes[i].id == axisId){
            var limit = parseFloat(limitInput.value);
            if($(limitInput).attr("placeholder") === "Max"){
                if(!isNaN(limit)){
                    chart.options.scales.yAxes[i].ticks.max =  limit;
                } else {
                    delete chart.options.scales.yAxes[i].ticks.max;
                }
            } else {
                if(!isNaN(limit)) {
                    chart.options.scales.yAxes[i].ticks.min =  limit;
                } else { 
                    delete chart.options.scales.yAxes[i].ticks.min;
                }
            }
        }
    }
    chart.update();

到目前为止，我已经尝试过不使用动画和同步行为进行更新，清除图表并使用.render（）重新呈现，但无济于事。此代码适用于具有更均匀值的数据集。

这个问题在ChartJS 2.9.3和最新版本的Chromium和Firefox上仍然存在。

Answer 1

如here和本GitHub issue所述，这是Chrome渲染和像素超出范围的方式的问题。没有更改ChartJS代码就无法正确解决此问题

更改为最大Y轴标签值后，ChartJS无法在更新后呈现笛卡尔图表中的线之一

1 个答案: