javascript - 带有 CSS 转换的 jQuery 迷你图

Question

我正在使用 jQuery Sparklines在使用 transform: scale 缩放的 html 页面上。不幸的是，这会导致 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标签。