帶有CSS變換的jQuery Sparklines

Question

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

...導致：

有什么辦法可以解決此問題？

Answer 1

將您的樣式從“ body”重命名為“ div”即可。

由於transfer：scale影響整個頁面，因此我們需要指定特定的div標簽。

Answer 2

問題是您已將變換指定為整體，因此只有其受影響才會將變換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>