javascript - 如何在 Javascript 中创建类似 excel 迷你图的内联条形图？

Question

我这里有一个关于此功能的图像示例，现在可在 Excel 2010 的迷你图中使用:

理想情况下，我希望有一条垂直线并指示每行的最大值/最小值。

任何达到这种效果的资源(我是来学习的)都会很棒。

Answer 1

(如果你只是想完成它，Google 图表会更快更简单 - 但如果你想学习，这听起来像是一个很酷的小项目。)

听起来您主要是在使用 HTML/CSS 时遇到了问题。

我会坚持使用 <div>为此，作为<table>浏览器在设置宽度、边框等方面有更多的包袱。<div>几乎是一张白纸。我会忽略您的示例图片中的所有额外线条(首先，无论如何)并专注于创建不同宽度的堆叠条，其中线条用于最大和最小。

HTML:

<div class="row">
  <div class="value">5873</div>
  <div class="min">3049</div>
  <div class="max">6039</div>
</div>

CSS:

div {
    height: 20px;  /* You'll want all of the heights to match */
}  

div.value {
     position: absolute;  /* All of the inner divs are positioned absolute so they overlap eachother */
     -moz-box-shadow: inset 0 0 10px #aaa;      /* basic inset shadow for some dimension - you could make it look however u like with some work */
     -webkit-box-shadow: inset 0 0 10px #aaa;
     box-shadow: inset 0 0 10px #aaa;
}
div.min,
div.max {
    position: absolute;
    text-indent: -999em;
    border-right: 2px solid #000;    /* This becomes the indicator for the min/max */
}

在 javascript 中，您需要设置所有 div.value 的宽度, div.max , 和 div.min基于他们的文本值是什么，比如:

$('div.value, div.min, div.max').each(function(){
    $(this).width($(this).text() / 100);
});

我在这里跳过了很多细节，但希望这会有所帮助。祝你好运!