ChartJS堆积条形图的透明间隙 [英] ChartJS Stacked Bar Chart transparent gaps

问题描述

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

I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2, but i=I've recreated it using vanilla ChartJS, latest version).

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

In my example here, I've turned all the bar data to black, and put it on a red background, with a hover border of white. If you look close you'll see vertical lines of red between the bars (ie: we're seeing through the bars themselves to the red background) and the white hover border never triggers on the left side.

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

Any ideas as to if this may be a data issue, or an options setting I haven't messed with yet, or possibly a bug in the package? The chart we are rendering this with is using thousands of data points and it starts to look like a broken gradient with all the subpixel transparent lines showing up. Any assistance would be greatly appreciated, thanks!

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

Here's some quick demo code i've put in a JSFiddle as an example:

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示例，如果您真正扩大图表视图，您将看到正在播放的线条.

Here is a JSFiddle example, if you really expand the chart view up you'll see the lines in play.

JSFiddle示例

条形图示例图

推荐答案

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

Remove this stacked: false, from xAxes to solve this issue. Anyway black on black (Or any other color) ==> veryyyyyyy very not friendly data visualization.

关于此行本人-这更多是GitHub问题(她无法解决此问题).

About the line himself - this is more a GitHub issue (No way to solve this her).

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.

For bar type "black on black" you should set the yAxes to false.

这篇关于ChartJS堆积条形图的透明间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！