chartJs柱状图下滑条怎么写？

最新推荐文章于 2024-03-14 15:07:43 发布

kakaxiD

最新推荐文章于 2024-03-14 15:07:43 发布

阅读量1.5k

点赞数

分类专栏：个人日记文章标签：插件

本文链接：https://blog.csdn.net/kakaxiD/article/details/54342114

版权

个人日记专栏收录该内容

108 篇文章 1 订阅

订阅专栏

demo:链接: http://pan.baidu.com/s/1hrOzctI 密码: armu
用到了2个插件一个是chartJs绘制图
一个是nouislider绘制滑动条
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/plugins/nouslider/nouislider.min.css" rel="stylesheet">
</head>
<body>
<div class="col-lg-6">
    <div class="ibox float-e-margins col-lg-12" style="clear: both;">
        <div class="ibox-title">
            <h5>Bar Chart Example</h5>
        </div>
        <div class="ibox-content" style="clear: both;">
            <div>
                <canvas id="barChart" height="140" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div id="drag-fixed" class="slider_red"></div>
    </div>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- NouSlider -->
<script src="js/plugins/nouslider/nouislider.min.js"></script>

<script src="js/plugins/chartJs/Chart.min.js"></script>
<script>
//dataObj后台动态生成
    var DataObj=[{"labels":["2014-5-6","2014-5-7","2014-5-8","2014-5-9","2014-5-10","2014-5-11","2014-5-12"],"data1":[30,29,45,60,100,200,154],"data2":[100,125,325,214,124,124,124]},
        {"labels":["2015-6-6","2015-6-7","2015-6-8","2015-6-9","2015-6-10","2015-5-11","2015-6-12"],"data1":[40,29,45,100,120,250,354],"data2":[300,145,325,284,174,20,50]},
        {"labels":["2016-6-6","2016-6-7","2016-6-8","2016-6-9","2016-6-10","2016-5-11","2016-6-12"],"data1":[40,29,45,100,120,250,354],"data2":[300,145,325,284,174,20,50]},
        {"labels":["2017-6-6","2017-6-7","2017-6-8","2017-6-9","2017-6-10","2017-5-11","2017-6-12"],"data1":[320,29,45,100,120,250,354],"data2":[390,165,325,284,174,240,50]},
        {"labels":["2014-5-6","2014-5-7","2014-5-8","2014-5-9","2014-5-10","2014-5-11","2014-5-12"],"data1":[30,29,45,60,100,200,154],"data2":[100,125,325,214,124,124,124]}];
//    star绘制柱状图
    var barData = {
        labels: [],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: []
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(26,179,148,0.5)",
                strokeColor: "rgba(26,179,148,0.8)",
                highlightFill: "rgba(26,179,148,0.75)",
                highlightStroke: "rgba(26,179,148,1)",
                data: []
            }
        ]
    };

    var barOptions = {
        scaleBeginAtZero: true,
        scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        barShowStroke: true,
        barStrokeWidth: 2,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
        responsive: true
    };
    var ctx = document.getElementById("barChart").getContext("2d");

//    柱形图初始值
    $(function(){
        barData.labels=DataObj[3].labels;
        barData.datasets[0].data=DataObj[3].data1;
        barData.datasets[1].data=DataObj[3].data2;
        var myNewChart = new Chart(ctx).Bar(barData,barOptions);//加载更新图表
    });
    var Slider = document.getElementById('drag-fixed');

//end 结束绘制

//    开始滑动条
    noUiSlider.create(Slider, {

        start: 4,//滑动条开始出现的位置
        connect: [true,false],
        range: {
            'min':0,//滑动条长度最小值
            'max': 4 //滑动条长度最大值
        },
        step:1//步数
    });
    Slider.noUiSlider.on('slide', function ( values, handle ) {
        //   $("#test-data").text(values[handle]);//得到滑条的值
        //  $("#test-data").text(this.get());  this.get() 得到滑条的值
        var index=parseInt(this.get());
        barData.labels=DataObj[index].labels;
        barData.datasets[0].data=DataObj[index].data1;
        barData.datasets[1].data=DataObj[index].data2;
        var myNewChart = new Chart(ctx).Bar(barData, barOptions);
    });
//    结束滑动条
</script>
</body>
</html>

kakaxiD

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chartJs柱状图下滑条怎么写？

demo:链接: http://pan.baidu.com/s/1hrOzctI 密码: armu 用到了2个插件一个是chartJs绘制图一个是nouislider绘制滑动条 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=
复制链接

扫一扫