如何在Javascript中创建像excel迷你图这样的内联条形图？

Question

我在此处有一个图像示例，此功能现在可在Excel 2010的火花线中使用：

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

这种效果的任何资源（我在这里学习）都会很棒。

Answer 1

（如果你只是想完成它，谷歌图表会更快更简单 - 但如果你想学习，这听起来像一个非常酷的小项目。）

听起来你主要是在使用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);
});

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

Answer 2

Google Chart Tools怎么样？看起来他们有很多选择 - 我们已经在我们的项目中成功使用了这个（我个人从未使用它）。

Here是一个简单的例子（标签不是你想要的，但有些例子有内联标签）：