Question

有一个意外的文字＆＃34; NaN＆＃34;当图表的数据集（Capital和Expense）隐藏在使用Chartjs（Link）插件创建的图表中时，显示在图表的Y轴附近。此处使用的 chartType 是 horizontalBar 图表。

还附有隐藏其中一个数据集（类型1）时的外观截图，以及隐藏两个数据集时类型2显示图表的截图。

Link to fiddle JsFiddle

Answer 1

<强>更新此修复程序在chart.js版本2.5（或更低版本）中工作，在版本2.6中他们说它默认是固定的。

OLD ANSWER：

您好，只需更改为:(请注意我在xAxis上的回调）

＆＃13;

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: 'Capital',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      label: 'Expense',
      data: [4, 8, 6, 14, 12, 6],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          //this will fix your problem with NaN
          callback: function(label, index, labels) {
            return label ? label : '';
          }
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

＆＃13;

无法解释为什么要显示“NaN＆＃39;”，我认为即使没有数据，它仍然会尝试显示刻度线。因此，在该回调中，您确保仅在存在时才显示数据。我在图表上遇到了同样的问题并且没有在任何地方找到任何答案，所以这个修复是我在飞行中想出来的，但是它正在工作。该回调是覆盖滴答显示的数据，因此您可以根据需要自定义它。

您也可以在此处查看此问题： Chart js Github

Answer 2

我设法通过不允许用户同时隐藏所有数据集来解决上述问题，即，始终至少有一个活动数据集。

Fiddle link below

http://jsfiddle.net/znppphyf/1

意外的文字＆＃34; NaN＆＃34;出现在图表的y轴附近

2 个答案: