javascript - ChartJS堆积条形图的透明间隙

Question

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

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

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

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

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 400],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

这是一个JSFiddle示例，如果您确实向上扩展了图表视图，您将看到正在运行的线。

JSFiddle Example

Bar Chart Example Img

Answer 1

从stacked: false,删除此xAxes以解决此问题。反正黑底黑字（或其他任何颜色）==> veryyyyyyy非常不友好的数据可视化。

关于该行本人-这更多是GitHub问题（她无法解决此问题）。

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: false,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 1100],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

对于bar键入“黑底黑字”，应将yAxes设置为false。