无法读取值 0 或 null 的未定义 ChartistJs 的属性“_index”

Question

我在我的网页上使用chartistJS制作图表。 我在图表师提供的选项中学习了 'onClick' function。

请在下面找到我的代码：

 public horizontalBarchartoptions = {
      'onClick' : function (evt, item) {
        var index = item[0]['_index']
        var reportId = latestScanReportID[index];
        routingFunct.navigate(["./resultPage/"+reportId]);
      },
      tooltips: {
              callbacks: {
                  label: function(tooltipItem) {
                      return  " "+ Number(tooltipItem.xLabel)+" issue(s)";
                  }
              }
          },
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Volume'
              }, 
              display: true,
              labelString: 'Density',
              ticks: {
                  mirror: true,
                  autoSkip: false,
                  padding: -30,
                  fontColor: '#fff'
                }}],
            xAxes: [{
              scaleLabel: {
                display: true,
                labelString: '# Issues'
              }, 
              ticks: {
                min: 0,
                userCallback: function(label, index, labels) {
                  // when the floored value is the same as the value we have a whole number
                  if (Math.ceil(label) === label) {
                      return label;
                  }
                }                
            },
            }]
         }       
        };

当点击一个栏时，上面的代码重定向到该特定栏 ID 的结果页面，下面是相同的图像：在这个图像中，当点击扫描 1 - 扫描 4 时，它被重定向到结果页面当点击扫描 5 时，它抛出以下异常，因为Scan 5的值为0

ERROR TypeError: Cannot read property '_index' of undefined

我可以从 -1 开始轴 label 但这不是更好的解决方案，你能建议一种不同的方法来解决这个问题吗？

提前致谢

Answer 1

我建议至少在“项目”没有元素时进行处理：

 public horizontalBarchartoptions = {
      'onClick' : function (evt, item) {
        if (item != null && item != undefined) {
           if (item.length > 0) {
              var index = item[0]['_index']
              var reportId = latestScanReportID[index];
              routingFunct.navigate(["./resultPage/"+reportId]);
           }
        }
      },
      tooltips: {
              callbacks: {
                  label: function(tooltipItem) {
                      return  " "+ Number(tooltipItem.xLabel)+" issue(s)";
                  }
              }
          },
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Volume'
              }, 
              display: true,
              labelString: 'Density',
              ticks: {
                  mirror: true,
                  autoSkip: false,
                  padding: -30,
                  fontColor: '#fff'
                }}],
            xAxes: [{
              scaleLabel: {
                display: true,
                labelString: '# Issues'
              }, 
              ticks: {
                min: 0,
                userCallback: function(label, index, labels) {
                  // when the floored value is the same as the value we have a whole number
                  if (Math.ceil(label) === label) {
                      return label;
                  }
                }                
            },
            }]
         }       
        };

希望这可以帮助。