[英]jQuery Sparklines with CSS Transform
我在html页面上使用jQuery Sparklines ,该页面使用transform: scale
。 不幸的是,这导致jQuery Sparklines生成的工具提示显示在错误的位置。 例如,以下代码...
<style>
body {
transform: scale(0.7);
transform-origin: 0 0;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() {
var myvalues = [10,8,5,7,4,4,10];
$('#line').sparkline(myvalues, {
type: 'line'
});
});
</script>
<div> random text random text random text random text random text random text <span id="line"></span> </div>
...导致:
有什么办法可以解决此问题?
将您的样式从“ body”重命名为“ div”即可。
由于transfer:scale影响整个页面,因此我们需要指定特定的div标签。
问题是您已将变换指定为整体,因此只有其受影响才会将变换CSS赋予特定的div或在CSS中使用:not选择器
这里的小提琴链接: https : //jsfiddle.net/hahkarthick/3v0s0xvm/
$(function() { var myvalues = [10,8,5,7,4,4,10]; $('#line').sparkline(myvalues, { type: 'line' }); });
div:not(span){ transform: scale(0.7); transform-origin: 0 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js"></script> <div> random text random random text random text <span id="line"></span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.