Chart.js上的自定义工具提示未定义

Question

我正在尝试添加一个自定义工具提示，其中必须将我在代码中定义的另一个列表中的数据放入其中。 我正在创建一个for循环来遍历这些值，但是在工具提示上却显示“ undefined”。我要去哪里错了？ 这是我的相同https://codepen.io/_aishwariya_/pen/WNwzwzR?editors=1010

的代码笔

options: {
      tooltips:{
        callbacks:{
          label:function(tooltipItem,data){
            var time_list = [1,2,3,4,5,6];
            var time_i = [];
            var i;
            for (i=0; i < time_list.values; i++){
              time_i = time_list[i]
            }
        let label = "Line 1";
        let label2 = "Line 2";
        let label3 = time_i[i];
        return [label, label2,label3];
          }
        }
      },

Answer 1

要在悬停项目的数组中显示相应的值，可以使用time_list[tooltipItem.index]：

          label: function(tooltipItem, data) {
            var time_list = [1, 2, 3, 4, 5, 6];
            let label = "Line 1";
            let label2 = "Line 2";
            return [label, label2, time_list[tooltipItem.index]];
          }

data_time = [0, 1, 2, 3, 4, 5, 6];
$(document).ready(function() {
  var options = {
    type: "line",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
          label: "Dust",
          data: [5, 10, 25, 5, 14, 3],
          backgroundColor: ["rgba(48, 79, 254, 0.2)"],
          borderColor: ["rgba(48, 79, 254, 1)"],
          borderWidth: 1
        },
        {
          label: "Lint",
          data: [3, 20, 4, 10, 12, 7],
          backgroundColor: ["rgba(136, 14, 79, 0.2)"],
          borderColor: ["rgba(136, 14, 79, 1)"],
          borderWidth: 1
        },
        {
          label: "Manual Rundown",
          data: [6, 10, 22, 21, 4, 18],
          backgroundColor: ["rgba(153, 102, 255, 0.2)"],
          borderColor: ["rgba(153, 102, 255, 1)"],
          borderWidth: 1
        },
        {
          label: "Paint Drop",
          data: [3, 5, 19, 22, 18, 6],
          backgroundColor: ["rgba(233, 30, 99, 0.2)"],
          borderColor: ["rgba(233, 30, 99, 1)"],
          borderWidth: 1
        },
        {
          label: "Dry Spray",
          data: [12, 28, 22, 14, 6, 3],
          backgroundColor: ["rgba(33, 150, 243, 0.2)"],
          borderColor: ["rgba(33, 150, 243, 1)"],
          borderWidth: 1
        },
        {
          label: "Robot Rundown",
          data: [22, 19, 3, 4, 28, 6],
          backgroundColor: ["rgba(0, 150, 136, 0.2)"],
          borderColor: ["rgba(0, 150, 136, 1)"],
          borderWidth: 1
        },
        {
          label: "Shrinkage",
          data: [1, 19, 15, 12, 3, 9],
          backgroundColor: ["rgba(76, 175, 80, 0.2)"],
          borderColor: ["rgba(76, 175, 80, 1)"],
          borderWidth: 1
        },
        {
          label: "Mottling",
          data: [9, 19, 28, 1, 6, 9],
          backgroundColor: ["rgba(255, 152, 0, 0.2)"],
          borderColor: ["rgba(255, 152, 0, 1)"],
          borderWidth: 1
        },
        {
          label: "Orange Peel",
          data: [30, 25, 23, 14, 6, 1],
          backgroundColor: ["rgba(255, 87, 34, 0.2)"],
          borderColor: ["rgba(255, 87, 34, 1)"],
          borderWidth: 1
        },
        {
          label: "Popping",
          data: [20, 30, 23, 13, 3, 2],
          borderWidth: 1
        },
        {
          label: "Spittage",
          data: [12, 17, 23, 27, 30, 15],
          borderWidth: 1
        },
        {
          label: "Blister",
          data: [18, 20, 25, 22, 12, 8],
          borderWidth: 1
        }
      ]
    },
    options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var time_list = [1, 2, 3, 4, 5, 6];
            let label = "Line 1";
            let label2 = "Line 2";
            return [label, label2, time_list[tooltipItem.index]];
          }
        }
      },
      animation: {
        tension: {
          duration: 1000,
          easing: "linear",
          from: 1,
          to: 0,
          loop: true
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  };
  var ctx = document.getElementById("myChart").getContext("2d");
  var chart = new Chart(ctx, options);

  chart.getDatasetMeta(0).hidden = false;
  chart.getDatasetMeta(1).hidden = false;
  chart.getDatasetMeta(2).hidden = false;
  chart.getDatasetMeta(3).hidden = true;
  chart.getDatasetMeta(4).hidden = true;
  chart.getDatasetMeta(5).hidden = true;
  chart.getDatasetMeta(6).hidden = true;
  chart.getDatasetMeta(7).hidden = true;
  chart.getDatasetMeta(8).hidden = true;
  chart.getDatasetMeta(9).hidden = true;
  chart.getDatasetMeta(10).hidden = true;
  chart.getDatasetMeta(11).hidden = true;



  function updateValLow() {
    $("#defMid").multiselect("destroy");
    $("#defHig").multiselect("destroy");
    //$("#defLow").multiselect('destroy');
    lowFactor();
    $("#defLow").multiselect({
      selectAllJustVisible: true,
      onChange: function(option, checked, select) {
        lowFactor();
      }
    });
  };

  function updateValMid() {
    $("#defLow").multiselect("destroy");
    $("#defHig").multiselect("destroy");
    //$("#defLow").multiselect('destroy');
    midFactor();
    $("#defMid").multiselect({
      selectAllJustVisible: true,
      onChange: function(option, checked, select) {
        midFactor();
      }
    });
  };

  function updateValHig() {
    $("#defMid").multiselect("destroy");
    $("#defLow").multiselect("destroy");
    highFactor();
    $("#defHig").multiselect({
      onChange: function(option, checked, select) {
        highFactor()
      }
    });
  }

  $("#defData").change(function() {
    var val = $(this).val();
    if (val == "low") {
      $("#defMid").multiselect("destroy");
      $("#defHig").multiselect("destroy");
      $("#lowData").attr("hidden", false);
      $("#midData").attr("hidden", true);
      $("#highData").attr("hidden", true);
      //$("#defLow").multiselect();
      updateValLow();
      chart.update();
    } else if (val == "medium") {
      $("#defLow").multiselect("destroy");
      $("#defMid").multiselect("destroy");
      $("#defHig").multiselect("destroy");
      $("#lowData").attr("hidden", true);
      $("#midData").attr("hidden", false);
      $("#highData").attr("hidden", true);
      updateValMid();
      chart.update();
    } else if (val == "high") {
      $("#defLow").multiselect("destroy");
      $("#defMid").multiselect("destroy");
      updateValHig();
      //$("#defHig").multiselect();
      $("#lowData").attr("hidden", true);
      $("#midData").attr("hidden", true);
      $("#highData").attr("hidden", false);
      //$("#defHig").multiselect('rebuild');
      chart.update();
    }
  });





  $("#defLow").multiselect({
    onLoad(element) {
      lowFactor();
    },
    onChange: function(option, checked, select) {
      var curVal = $("#defLow").val();
      lowFactor();
    }
  });

  $("#defMid").multiselect({
    onLoad(element) {
      midFactor();
    },
    onChange: function(option, checked, select) {
      midFactor();
    }
  });

  $("#defHig").multiselect({
    onLoad(element) {
      highFactor();
    },
    onChange: function(option, checked, select) {
      highFactor();
    }
  });
});

/* canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#lowData label{
  display: block!important;
}
ul.multiselect-container, .btn-group{
  width:100%;
} */

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#lowData,
#midData,
#highData {
  label {
    display: block !important;
    margin-bottom: 0.5rem;
  }
  .multiselect-native-select {
    .btn-group {
      button {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        text-align: left;
        &::after {
          position: absolute;
          right: 15px;
          top: 16px;
        }
      }
      .multiselect-container {
        li {
          height: 46px;
          label {
            padding: 10px 20px;
            margin-bottom: 0;
          }
          &:hover {
            background: #333;
            label {
              color: #fff;
            }
          }
        }
      }
    }
  }
}

ul.multiselect-container,
.btn-group {
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3">
      <div class="form-group mt-3 mb-3">
        <label for="defData">Select Factor</label>
        <select class="form-control" id="defData">
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
        </select>
      </div>
    </div>
    <div class="col-3">
      <div id="lowData" class="form-group mt-3 mb-3">
        <label for="defData">Select Factor</label>
        <select class="form-control" id="defLow" multiple="multiple">
          <option value="shrinkage" selected="selected">Shrinkage</option>
          <option value="mottling" selected="selected">Mottling</option>
          <option value="spittage" selected="selected">Spittage</option>
          <option value="blister" selected="selected">Blister</option>

        </select>
      </div>
      <div id="midData" class="form-group mt-3 mb-3" hidden>
        <label for="defMid">Select Factor</label>
        <select class="form-control" id="defMid" multiple="multiple">
          <option value='pdrop' selected='selected'>Paint Drop</option>
          <option value='dspray' selected='selected'>Dry Spray</option>
          <option value='rbdown' selected='selected'>Robot Rundown</option>
          <option value='opeel' selected='selected'>Orange Peel</option>
          <option value='popping' selected='selected'>Popping</option>
        </select>
      </div>
      <div id="highData" class="form-group mt-3 mb-3" hidden>
        <label for="defHig">Select Factor</label>
        <select class="form-control" id="defHig" multiple="multiple">
          <option value='dust' selected='selected'>Dust</option>
          <option value='lint' selected='selected'>Lint</option>
          <option value='mrd' selected='selected'>Manual Rundown</option>
        </select>
      </div>
    </div>
    <div class="col-3"></div>
  </div>
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <canvas id="myChart"></canvas>
    </div>
    <div class="col-2"></div>
  </div>
</div>