标签:bootstrap-modal javascript jquery chart-js twitter-bootstrap
我正在使用chart.js开展一个项目.我想在图表js中单击单个条而不是工具提示时显示引导模式.现在我正在使用chart id的onclick函数来显示一个bootstrap模态.有没有办法让它变得可能.?
这是我的代码:
HTML:
<div class="chart1">
<canvas id="barchart5"></canvas>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JAVASCRIPT:
<script type="text/javascript">
var data5 ={
labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
datasets : [
{
fillColor : "#F64747",
strokeColor : "#F64747",
highlightFill: "#F64747",
highlightStroke: "#F64747",
data: [4, 6, 3, 2, 10, 5, 5, 7]
},
{
fillColor : "#19B5FE",
strokeColor : "#19B5FE",
highlightFill : "#19B5FE",
highlightStroke : "#19B5FE",
data: [3, 6, 4, 3, 10, 10, 5, 8]
},
{
fillColor : "#F7CA18",
strokeColor : "#F7CA18",
highlightFill : "#F7CA18",
highlightStroke : "#F7CA18",
data: [4, 6, 10, 4, 7, 6, 2, 4]
}
]
};
var ctx = document.getElementById("barchart5").getContext("2d");
var barchart5 = new Chart(ctx).Bar(data5, {
responsive : true,
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
alert(ctx);
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
})
}
});
$( "#barchart5" ).click(function() {
$('#myModal').modal('show');
});
</script>
解决方法:
canvas.onclick = function(evt) {
var points = chart.getBarsAtEvent(evt);
var value = chart.datasets[0].points.indexOf(points[0]);
if(value == 5){
$('#myModal').modal('show');
} else if(value == 4){
$('#myModal1').modal('show');
}
};
标签:bootstrap-modal,javascript,jquery,chart-js,twitter-bootstrap 来源: https://codeday.me/bug/20190824/1706293.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。