搜索
搜索

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

coder_bg 发表于 Dev
42
coder_bg

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

要在悬停项目的数组中显示相应的值，您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

chart.js条形图上的自定义工具提示

Chart.js自定义工具提示模板索引

Chart.js：显示自定义工具提示，在堆叠的条形图中始终可见

删除自定义Chart Js工具提示颜色方块

JavaScript Chart.js-自定义数据格式以显示在工具提示上

图表JS自定义工具提示未显示

Highcharts angular.js自定义工具提示

Syncfusion JS图表自定义工具提示

如何自定义Chart.js 2.0甜甜圈图的工具提示？

在chart.js的工具提示中添加自定义标题

设置工具提示方块Chart.js的自定义颜色

如何自定义Chart.js折线图的工具提示？

在c3.js中获取x轴值以自定义工具提示？

C3.js 自定义工具提示动画 onmouseover

dimple.js中的自定义工具提示颜色和字体大小

带有tippy.js的Alpine自定义工具提示指令darkmode

自定义Chart.js

如何通过单击Chart.js v2画布外部的自定义按钮来导航工具提示弹出窗口？

Chart.js无法读取未定义的属性“ fontSize”

Chart.js图例文本显示未定义

未捕获的ReferenceError：未定义require-Chart.js

Chart.JS无法读取未定义的属性“ _meta”

Chart.js在视图中未定义的变量

Chart.JS 错误：this.scale 未定义

Chart.js添加自定义标题，字幕，图形

Chart.js-y轴自定义标签

自定义Chart.js故障排除

使用 Chart.js 自定义 y 轴

在自定义leaflet.js控件上设置工具提示

TOP 榜单

  1. 1

    隐藏发件人没有短信PHP

  2. 2

    材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

  3. 3

    在Windows 7中无法删除文件（2）

  4. 4

    HttpClient中的角度变化检测

  5. 5

    Azure VM启动/停止日志

  6. 6

    如何在 Vb.net 中使用函数返回多个值

  7. 7

    Powerpoint-条形长度错误的堆积条形图

  8. 8

    最新歌剧断断续续的快速拨号和渲染错误

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    需要公式以vlookup逗号分隔单个单元格中的值

  11. 11

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  12. 12

    ggplot：对齐多个分面图-所有大小不同的分面

  13. 13

    OS X-为什么我需要打开WiFi才能确定最近的位置

  14. 14

    用日期数据透视表和日期顺序查询

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    如何在Django中使用UUID

  17. 17

    加载Microsoft Visual菜单时出现问题

  18. 18

    具有if条件的SQL UPDATE

  19. 19

    从JSON到JSONL的Python转换

  20. 20

    如何在Kod中更改字体？

  21. 21

    共享图像将路径放入地址

热门标签

归档