chartJs柱状图下滑条怎么写?
来源:互联网 发布:微博怎么修改个性域名 编辑:程序博客网 时间:2024/04/29 14:28
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>
0 0
- chartJs柱状图下滑条怎么写?
- chartjs
- Android下滑条ScrollView
- chartjs 王者荣耀能力雷达图怎么做
- JAVA滚动条自动下滑到底部
- 方块无法下滑,怎么解决啊??
- 方块无法下滑怎么解决QAQ
- vue-chartjs
- Android自定义View写柱状图
- 点击按钮滚动条下滑到相应位置
- jreeChart柱状图实例解析(包含条…
- 怎么写?
- 请问~iOS怎么实现分段柱状图呢?
- c#怎么实现chart柱状图的不同颜色
- 怎么用java swing制作一个柱状图
- 自己写的平面柱状图,有个小bug
- 在oracle数据库中需要查询出前8条记录的sql语句怎么写
- ChartJs自定义tooltipTemplate
- jquery发ajax请求
- 视频列表的android客户端和springmvc服务端实现(一)
- 使用RecyclerView遇到的 Inconsistency detected
- <转>Spark机器学习库(MLlib)指南
- Spring 核心框架体系结构
- chartJs柱状图下滑条怎么写?
- 异常处理Throwable类
- Oracle常用函数
- Vagrant软件安装
- 去除oracle中的sql脚本中含有"records committed..."和"commit;"的行
- original thread that created a view hierarchy can touch its views.
- Flask源码解读 <1> --- 浅谈Flask基本工作流程
- decorators.xml的用法
- 目录:项目工具