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

【问题标题】：How can I create this inline bar chart like excel spark lines in Javascript?如何在 Javascript 中创建像 excel 迷你图这样的内联条形图？
【发布时间】：2011-01-30 15:47:43
【问题描述】：

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

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

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

【问题讨论】：

也许稍微调整一下？ hscripts.com/scripts/JavaScript/chart-animation.php
到目前为止你尝试过什么？您不知道哪些具体部分该怎么做？
我正在比较 table 和 div 的布局标签，并使用具有填充颜色的彩色 div。我在对齐、边距、边框、布局方面都搞砸了......并且无法获得 3d 感觉

标签： javascript html graph spreadsheet bar-chart

【解决方案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);
});

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

【讨论】：

太棒了！现在我要建立一个基于 div 的表！（基于表格的表格不适用于我的目的）

【解决方案2】：

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

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

【讨论】：