jQuery 带有 CSS 变换的迷你图

Question

我在使用 transform: scale 缩放的 html 页面上使用 jQuery Sparklines。不幸的是，这会导致 jQuery 迷你图生成的工具提示显示在错误的位置。比如下面的代码...

<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>

... 结果是：

有什么方法可以解决这个问题吗？

Answer 1

将您的样式从 "body" 重命名为 "div" 它会起作用。

由于 transfer:scale 影响整个页面，我们需要指定到特定的 div 标签。

Answer 2

问题是您已将变换指定为 total body，因此只有它受到影响时才会将变换 css 指定为特定的 div 或在 css[=14 中使用 :not 选择器=]

这里是fiddleLink: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>

jQuery 带有 CSS 变换的迷你图

jQuery Sparklines with CSS Transform

javascript

css

jquery

sparklines