ChartJS堆积的条形图透明间隙

Question

我已经花了几天的时间思考这个问题，开始认为它是chartJS程序包中的错误？当我设置堆积的条形图时，即使使用非常简单的选项配置，我也倾向于在条形数据本身之间获得非常细小的透明间隙。条形图中的数据越多，它变得越明显。我已经完全将其与我的代码隔离了（我们正在使用React和react-chartjs-2，但我=我已经使用最新版本的ChartCharJS重新创建了它。）>

在这里的示例中，我已将所有条形数据都变为黑色，然后将其置于红色背景上，并带有白色的悬停边框。如果您仔细观察，您会在条形图之间看到红色的垂直线（即：我们正在通过条形图看到红色背景），而白色的悬停边框永远不会在左侧触发。

关于这个问题可能是数据问题，或者我还没有弄乱的选项设置，或者可能是程序包中的错误有任何想法吗？我们正在渲染的图表使用了数千个数据点，并且开始看起来像是一个破碎的渐变，所有子像素透明线都在显示。任何帮助将不胜感激，谢谢！

以下是我在JSFiddle中放入的一些快速演示代码作为示例：

function getValue() { return Math.floor(Math.random()*10000)}
function getData() { return [getValue(), getValue(), getValue(), getValue()]; }

var barOptions_stacked = {
      tooltips: { enabled: false },
            hover: { mode: 'point', animationDuration: 0 },
      scales: {
        xAxes: [
          {
            ticks: {
              beginAtZero: true,
              fontFamily: "'Open Sans Bold', sans-serif",
              fontSize: 10, fontColor: "#FFF"
            },
            scaleLabel: { display: false },
            gridLines: {},
                        stacked: true,
          },
        ],
        yAxes: [
          {
            gridLines: {display: false },
            ticks: {
              fontFamily: "'Open Sans Bold', sans-serif",
              fontSize: 10, fontColor: "#FFF"
            },
            stacked: true,
          },
        ],
      },
      legend: { display: false }
    };

var chart   = document.getElementById('myChart');
var ctx     = chart.getContext('2d');
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013', '2012', '2011'],
    datasets: [
      {
        data: getData(),
        backgroundColor: '#000000',
                hoverBorderColor: '#FFFFFF',
                hoverBorderWidth: { top: 2, right: 2, bottom: 2, left: 2 }
      },
      {
        data: getData(),
        backgroundColor: '#0000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
                hoverBorderWidth: { top: 10, right: 10, bottom: 10, left: 10 }
      },
      {
        data: getData(),
        backgroundColor: '#0000000',
                hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
      {
        data: getData(),
        backgroundColor: '#000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
      {
        data: getData(),
        backgroundColor: '#000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
      {
        data: getData(),
        backgroundColor: '#000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
      {
        data: getData(),
        backgroundColor: '#000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
      {
        data: getData(),
        backgroundColor: '#000000',
        hoverBorderColor: '#FFFFFF',
        hoverBorderWidth: 1,
      },
    ],
  },
  options: barOptions_stacked,
});
这里是一个JSFiddle示例，如果您真正扩大了图表视图，您将看到正在运行的线。

JSFiddle Example

Bar Chart Example Img

我已经花了几天的时间思考这个问题，开始认为它是chartJS软件包中的错误？当我设置堆积的条形图时，即使使用非常简单的选项配置，我也倾向于得到非常...

Answer 1

它看起来像个小虫子。您是否说过这[[hairline