我在这里有一个此功能的图像示例,现在可以在 Excel 2010 的迷你图中使用:
理想情况下,我希望有一条垂直线来指示每行的最大值/最小值。
任何具有这种效果的资源(我在这里学习)都会很棒。
我在这里有一个此功能的图像示例,现在可以在 Excel 2010 的迷你图中使用:
理想情况下,我希望有一条垂直线来指示每行的最大值/最小值。
任何具有这种效果的资源(我在这里学习)都会很棒。
(如果你只是想完成它,谷歌图表会更快更简单 - 但如果你想学习,这听起来是一个非常酷的小项目。)
听起来您主要是在使用 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 中,您将要设置 all div.value
、和的宽度div.max
,并div.min
根据它们的文本值是什么,例如:
$('div.value, div.min, div.max').each(function(){
$(this).width($(this).text() / 100);
});
我在这里跳过了很多细节,但希望这会有所帮助。祝你好运!