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]：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: function(tooltipItem, data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var time_list = [1, 2, 3, 4, 5, 6];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let label = "Line 1";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let label2 = "Line 2";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return [label, label2, time_list[tooltipItem.index]];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }data_time = [0, 1, 2, 3, 4, 5, 6];$(document).ready(function() {&nbsp; var options = {&nbsp; &nbsp; type: "line",&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],&nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Dust",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [5, 10, 25, 5, 14, 3],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(48, 79, 254, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(48, 79, 254, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Lint",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [3, 20, 4, 10, 12, 7],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(136, 14, 79, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(136, 14, 79, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Manual Rundown",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [6, 10, 22, 21, 4, 18],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(153, 102, 255, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(153, 102, 255, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Paint Drop",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [3, 5, 19, 22, 18, 6],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(233, 30, 99, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(233, 30, 99, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Dry Spray",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [12, 28, 22, 14, 6, 3],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(33, 150, 243, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(33, 150, 243, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Robot Rundown",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [22, 19, 3, 4, 28, 6],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(0, 150, 136, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(0, 150, 136, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Shrinkage",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [1, 19, 15, 12, 3, 9],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(76, 175, 80, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(76, 175, 80, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Mottling",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [9, 19, 28, 1, 6, 9],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(255, 152, 0, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(255, 152, 0, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Orange Peel",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [30, 25, 23, 14, 6, 1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ["rgba(255, 87, 34, 0.2)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: ["rgba(255, 87, 34, 1)"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Popping",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [20, 30, 23, 13, 3, 2],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Spittage",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [12, 17, 23, 27, 30, 15],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Blister",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [18, 20, 25, 22, 12, 8],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; tooltips: {&nbsp; &nbsp; &nbsp; &nbsp; callbacks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: function(tooltipItem, data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var time_list = [1, 2, 3, 4, 5, 6];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let label = "Line 1";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let label2 = "Line 2";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return [label, label2, time_list[tooltipItem.index]];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; animation: {&nbsp; &nbsp; &nbsp; &nbsp; tension: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; easing: "linear",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loop: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reverse: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };&nbsp; var ctx = document.getElementById("myChart").getContext("2d");&nbsp; var chart = new Chart(ctx, options);&nbsp; chart.getDatasetMeta(0).hidden = false;&nbsp; chart.getDatasetMeta(1).hidden = false;&nbsp; chart.getDatasetMeta(2).hidden = false;&nbsp; chart.getDatasetMeta(3).hidden = true;&nbsp; chart.getDatasetMeta(4).hidden = true;&nbsp; chart.getDatasetMeta(5).hidden = true;&nbsp; chart.getDatasetMeta(6).hidden = true;&nbsp; chart.getDatasetMeta(7).hidden = true;&nbsp; chart.getDatasetMeta(8).hidden = true;&nbsp; chart.getDatasetMeta(9).hidden = true;&nbsp; chart.getDatasetMeta(10).hidden = true;&nbsp; chart.getDatasetMeta(11).hidden = true;&nbsp; function updateValLow() {&nbsp; &nbsp; $("#defMid").multiselect("destroy");&nbsp; &nbsp; $("#defHig").multiselect("destroy");&nbsp; &nbsp; //$("#defLow").multiselect('destroy');&nbsp; &nbsp; lowFactor();&nbsp; &nbsp; $("#defLow").multiselect({&nbsp; &nbsp; &nbsp; selectAllJustVisible: true,&nbsp; &nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; &nbsp; lowFactor();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; };&nbsp; function updateValMid() {&nbsp; &nbsp; $("#defLow").multiselect("destroy");&nbsp; &nbsp; $("#defHig").multiselect("destroy");&nbsp; &nbsp; //$("#defLow").multiselect('destroy');&nbsp; &nbsp; midFactor();&nbsp; &nbsp; $("#defMid").multiselect({&nbsp; &nbsp; &nbsp; selectAllJustVisible: true,&nbsp; &nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; &nbsp; midFactor();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; };&nbsp; function updateValHig() {&nbsp; &nbsp; $("#defMid").multiselect("destroy");&nbsp; &nbsp; $("#defLow").multiselect("destroy");&nbsp; &nbsp; highFactor();&nbsp; &nbsp; $("#defHig").multiselect({&nbsp; &nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; &nbsp; highFactor()&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp; $("#defData").change(function() {&nbsp; &nbsp; var val = $(this).val();&nbsp; &nbsp; if (val == "low") {&nbsp; &nbsp; &nbsp; $("#defMid").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#defHig").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#lowData").attr("hidden", false);&nbsp; &nbsp; &nbsp; $("#midData").attr("hidden", true);&nbsp; &nbsp; &nbsp; $("#highData").attr("hidden", true);&nbsp; &nbsp; &nbsp; //$("#defLow").multiselect();&nbsp; &nbsp; &nbsp; updateValLow();&nbsp; &nbsp; &nbsp; chart.update();&nbsp; &nbsp; } else if (val == "medium") {&nbsp; &nbsp; &nbsp; $("#defLow").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#defMid").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#defHig").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#lowData").attr("hidden", true);&nbsp; &nbsp; &nbsp; $("#midData").attr("hidden", false);&nbsp; &nbsp; &nbsp; $("#highData").attr("hidden", true);&nbsp; &nbsp; &nbsp; updateValMid();&nbsp; &nbsp; &nbsp; chart.update();&nbsp; &nbsp; } else if (val == "high") {&nbsp; &nbsp; &nbsp; $("#defLow").multiselect("destroy");&nbsp; &nbsp; &nbsp; $("#defMid").multiselect("destroy");&nbsp; &nbsp; &nbsp; updateValHig();&nbsp; &nbsp; &nbsp; //$("#defHig").multiselect();&nbsp; &nbsp; &nbsp; $("#lowData").attr("hidden", true);&nbsp; &nbsp; &nbsp; $("#midData").attr("hidden", true);&nbsp; &nbsp; &nbsp; $("#highData").attr("hidden", false);&nbsp; &nbsp; &nbsp; //$("#defHig").multiselect('rebuild');&nbsp; &nbsp; &nbsp; chart.update();&nbsp; &nbsp; }&nbsp; });&nbsp; $("#defLow").multiselect({&nbsp; &nbsp; onLoad(element) {&nbsp; &nbsp; &nbsp; lowFactor();&nbsp; &nbsp; },&nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; var curVal = $("#defLow").val();&nbsp; &nbsp; &nbsp; lowFactor();&nbsp; &nbsp; }&nbsp; });&nbsp; $("#defMid").multiselect({&nbsp; &nbsp; onLoad(element) {&nbsp; &nbsp; &nbsp; midFactor();&nbsp; &nbsp; },&nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; midFactor();&nbsp; &nbsp; }&nbsp; });&nbsp; $("#defHig").multiselect({&nbsp; &nbsp; onLoad(element) {&nbsp; &nbsp; &nbsp; highFactor();&nbsp; &nbsp; },&nbsp; &nbsp; onChange: function(option, checked, select) {&nbsp; &nbsp; &nbsp; highFactor();&nbsp; &nbsp; }&nbsp; });});/* canvas {&nbsp; -moz-user-select: none;&nbsp; -webkit-user-select: none;&nbsp; -ms-user-select: none;}#lowData label{&nbsp; display: block!important;}ul.multiselect-container, .btn-group{&nbsp; width:100%;} */canvas {&nbsp; -moz-user-select: none;&nbsp; -webkit-user-select: none;&nbsp; -ms-user-select: none;}#lowData,#midData,#highData {&nbsp; label {&nbsp; &nbsp; display: block !important;&nbsp; &nbsp; margin-bottom: 0.5rem;&nbsp; }&nbsp; .multiselect-native-select {&nbsp; &nbsp; .btn-group {&nbsp; &nbsp; &nbsp; button {&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: calc(1.5em + 0.75rem + 2px);&nbsp; &nbsp; &nbsp; &nbsp; padding: 0.375rem 0.75rem;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; &nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; &nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; &nbsp; &nbsp; color: #495057;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; background-clip: padding-box;&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ced4da;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 0.25rem;&nbsp; &nbsp; &nbsp; &nbsp; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &::after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 16px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .multiselect-container {&nbsp; &nbsp; &nbsp; &nbsp; li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 46px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #333;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}ul.multiselect-container,.btn-group {&nbsp; 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">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-3"></div>&nbsp; &nbsp; <div class="col-3">&nbsp; &nbsp; &nbsp; <div class="form-group mt-3 mb-3">&nbsp; &nbsp; &nbsp; &nbsp; <label for="defData">Select Factor</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="defData">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="low">Low</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="medium">Medium</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="high">High</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-3">&nbsp; &nbsp; &nbsp; <div id="lowData" class="form-group mt-3 mb-3">&nbsp; &nbsp; &nbsp; &nbsp; <label for="defData">Select Factor</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="defLow" multiple="multiple">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="shrinkage" selected="selected">Shrinkage</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="mottling" selected="selected">Mottling</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="spittage" selected="selected">Spittage</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="blister" selected="selected">Blister</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="midData" class="form-group mt-3 mb-3" hidden>&nbsp; &nbsp; &nbsp; &nbsp; <label for="defMid">Select Factor</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="defMid" multiple="multiple">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='pdrop' selected='selected'>Paint Drop</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='dspray' selected='selected'>Dry Spray</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='rbdown' selected='selected'>Robot Rundown</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='opeel' selected='selected'>Orange Peel</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='popping' selected='selected'>Popping</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="highData" class="form-group mt-3 mb-3" hidden>&nbsp; &nbsp; &nbsp; &nbsp; <label for="defHig">Select Factor</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="defHig" multiple="multiple">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='dust' selected='selected'>Dust</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='lint' selected='selected'>Lint</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='mrd' selected='selected'>Manual Rundown</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-3"></div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-2"></div>&nbsp; &nbsp; <div class="col-8">&nbsp; &nbsp; &nbsp; <canvas id="myChart"></canvas>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-2"></div>&nbsp; </div></div>