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

分类：编程问答

如何解决Chart.js上的自定义工具提示未定义

我正在尝试添加一个自定义工具提示，其中必须将我在代码中定义的另一个列表中的数据放入其中。 我正在创建一个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];
          }
        }
      },

解决方法

要在悬停项目的数组中显示相应的值，可以使用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,6];
$(document).ready(function() {
  var options = {
    type: "line",data: {
      labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
          label: "Dust",data: [5,10,25,14,3],backgroundColor: ["rgba(48,79,254,0.2)"],borderColor: ["rgba(48,1)"],borderWidth: 1
        },{
          label: "Lint",data: [3,20,12,7],backgroundColor: ["rgba(136,borderColor: ["rgba(136,{
          label: "Manual Rundown",data: [6,22,21,18],backgroundColor: ["rgba(153,102,255,borderColor: ["rgba(153,{
          label: "Paint Drop",19,18,6],backgroundColor: ["rgba(233,30,99,borderColor: ["rgba(233,{
          label: "Dry Spray",data: [12,28,6,backgroundColor: ["rgba(33,150,243,borderColor: ["rgba(33,{
          label: "Robot Rundown",data: [22,backgroundColor: ["rgba(0,136,borderColor: ["rgba(0,{
          label: "Shrinkage",data: [1,15,9],backgroundColor: ["rgba(76,175,80,borderColor: ["rgba(76,{
          label: "Mottling",data: [9,backgroundColor: ["rgba(255,152,borderColor: ["rgba(255,{
          label: "Orange Peel",data: [30,23,1],87,34,{
          label: "Popping",data: [20,13,2],{
          label: "Spittage",17,27,15],{
          label: "Blister",data: [18,8],borderWidth: 1
        }
      ]
    },options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem,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,select) {
        midFactor();
      }
    });
  };

  function updateValHig() {
    $("#defMid").multiselect("destroy");
    $("#defLow").multiselect("destroy");
    highFactor();
    $("#defHig").multiselect({
      onChange: function(option,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",false);
      //$("#defHig").multiselect('rebuild');
      chart.update();
    }
  });





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

  $("#defMid").multiselect({
    onLoad(element) {
      midFactor();
    },select) {
      midFactor();
    }
  });

  $("#defHig").multiselect({
    onLoad(element) {
      highFactor();
    },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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot