【how2j Bootstrap+Chartjs】插件部分难点代码及Chartjs常用代码记录

日光倾

已于 2024-05-23 13:04:37 修改

阅读量164

点赞数 2

分类专栏：杂七杂八文章标签： bootstrap 前端 html

于 2024-05-23 11:50:43 首次发布

原文链接：https://how2j.cn/k/chartjs/chartjs-tooltips/2061.html

版权

杂七杂八专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模态窗体

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    提问（点击弹出模态窗口）
</button>

 点击空白不会收起 
<div class="modal fade" id="myModal"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  弹出不带动画版<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  弹出带动画版 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">提问</h4>
            </div>

            <div class="modal-body">
                <p>问题描述</p>
                <textarea class="form-control"></textarea>
            </div>

            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button">提交</button>
            </div>

        </div>
    </div>
</div>

提示工具

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button style="margin-bottom:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

说明
这段 script 脚本是使用 jQuery 和 Bootstrap 的 tooltip 插件来初始化页面上的具有 data-toggle=‘tooltip’ 属性的元素作为提示框（tooltips）的。

让我们逐一解析这段脚本：

$(function () { … });: 这是一个 jQuery 的文档就绪函数。它的意思是当 HTML 文档完全加载并解析完成后，才执行括号内的代码。这确保了你在尝试操作 DOM（文档对象模型）元素之前，它们已经存在于页面上。
$(“[data-toggle=‘tooltip’]”): 这是一个 jQuery 选择器，用于选择页面上所有具有 data-toggle=‘tooltip’ 属性的元素。在 Bootstrap 中，这个属性通常用于标识哪些元素应该被初始化为提示框。
.tooltip();: 这是调用 Bootstrap tooltip 插件的初始化方法。当你调用这个方法时，Bootstrap 会查找选定的元素（在本例中是所有具有 data-toggle=‘tooltip’ 属性的元素），并将它们初始化为提示框。
综上所述，这段脚本的作用是：当页面加载完成后，自动将所有具有 data-toggle=‘tooltip’ 属性的元素初始化为 Bootstrap 提示框。

为了使这段代码正常工作，你需要确保你的页面已经加载了 jQuery 和 Bootstrap 的 JavaScript 和 CSS 文件。

另外，为了使提示框显示正确的文本和样式，你通常还需要为这些元素提供额外的数据属性，如 data-original-title（用于设置提示框的标题）和 title（尽管 Bootstrap 通常推荐使用 data-original-title）。例如：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-original-title="这是一个提示框！">  
  点击我  
</button>

3 轮播图

基本轮播
带标题的轮播
设置轮播速度
控制前后的轮播

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>


<style>
    div.item img{
      width:100%;
     }
    div#carousel-example-generic{
      width:80%;
      margin:0 auto;
    }
  </style>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">


    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="https://how2j.cn/img/site/step/3491.png" >
          <div class="carousel-caption">
            LOL1
          </div>
        </div>
        <div class="item">
                <img src="https://how2j.cn/img/site/step/3492.png" >
                <div class="carousel-caption">
                    LOL1
                  </div>
        </div>
        <div class="item">
                <img src="https://how2j.cn/img/site/step/3493.png" >
                <div class="carousel-caption">
                    LOL1
                  </div>
        </div>
     
        <div class="item">
                <img src="https://how2j.cn/img/site/step/3494.png" >
                <div class="carousel-caption">
                    LOL1
                  </div>
        </div>
     

</div>


<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 
  </a>

CHartjs

<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart" ></canvas>
</div>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
           {
                label: '示例1',
                data: [12, 19, 3, 5, 0, 3],
                borderColor:'blue',
                backgroundColor:'skyBlue',
                borderWidth: 1,
                yAxisID: 'y-axis-1',
            },
           {
                label: '示例2',
                data: [182, 51, 133, 54, 105, 96],
                borderColor:'red',
                backgroundColor:'pink',
                borderWidth: 1,
                yAxisID: 'y-axis-2',
            },
     
    ]
        },
        options:{
            scales:{
                            yAxes: [{
                                type: 'linear',
                                display: true,
                                position: 'left',
                                id: 'y-axis-1',
                            }, {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                id: 'y-axis-2',
                                gridLines: {
                                    drawOnChartArea: false
                                }
                            }],       
     
            }
        }
    });
    </script>

回调函数：通过callbacks 函数可以自定义提示文字里的显示信息

<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
     
<div style="width:400px;margin:0px auto">
    <canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
        datasets: [
       {
            label: '示例1',
            data: [12, 19, 3, 5, 0, 3],
            borderColor:'blue',
            backgroundColor:'skyBlue',
            borderWidth: 1,
            fill: false,
            yAxisID: 'y-axis-1',
        },
       {
            label: '示例2',
            data: [182, 51, 133, 54, 105, 96],
            borderColor:'red',
            backgroundColor:'pink',
            borderWidth: 1,
            fill: false,
            yAxisID: 'y-axis-2',
              
        },
   
]
    },
    options:{
        scales:{
                        yAxes: [{
                            type: 'linear',
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }, {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            id: 'y-axis-2',
                            gridLines: {
                                drawOnChartArea: false
                            }
                        }],     
   
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function(tooltipItem, myData) {
                    var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) {
                        label += '的数值是: ';
                    }
                    label += parseFloat(tooltipItem.value).toFixed(2);
                    return label;
                }
            },
        },       
    }
});
</script>

参考资料

BootStrap系列教材（三十二）- 插件 - 提示工具

日光倾

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【how2j Bootstrap+Chartjs】插件部分难点代码及Chartjs常用代码记录

另外，为了使提示框显示正确的文本和样式，你通常还需要为这些元素提供额外的数据属性，如 data-original-title（用于设置提示框的标题）和 title（尽管 Bootstrap 通常推荐使用 data-original-title）。为了使这段代码正常工作，你需要确保你的页面已经加载了 jQuery 和 Bootstrap 的 JavaScript 和 CSS 文件。
复制链接

扫一扫