char.js使用类型时重叠条形列：'time'

Question

每当我使用type: "time"中的xAxes时，map.js似乎重叠了列：

    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }],
         xAxes : [{
             type: 'time'
         }],
    },

Reproduction online

我做错了吗？

Answer 1

我发现重叠问题是由于条形尺寸计算是基于时间尺度中的刻度数。在controller.bar.js中的原始getRule函数下： var tickSize = fullSize / scale.ticks.length;

当步长＆gt;优化时标时发生问题。 1，导致条形尺寸计算出错。条形尺寸变大并与相邻条形重叠。正确的计算应该是： var tickSize = fullSize / (scale.ticks.length * scale.stepSize);

我使用新的数据集控制器接口和扩展接口来导出我的客户条形图控制器和TimeScale，以修改这两个接口中的两行代码。

我更改的代码如下： 在新的TimeScale界面下：

buildTicks: function() {
    ...
    me.stepSize = stepSize;
    ...
};

在新的 Chart.controllers.derivedBar 界面下：

getRuler: function() {
    ...
    var tickSize = fullSize / (scale.ticks.length * scale.stepSize);
    ...
};

在此处查看完整代码https://codepen.io/allentcm/pen/KqQGoE/