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

Question

我正在尝试添加一个自定义工具提示，其中我必须从我在代码中定义的另一个列表中放置数据。我正在创建一个for循环来遍历这些值，但我的工具提示上出现“未定义”。我哪里错了？这是我的相同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>