Javascript 为自制条形图添加图例

我知道你可能想知道自制的柱状图？为什么不是现有的图书馆？我讨厌使用20000行代码的文件，而只需要500行代码

哦，这很有趣：）主要目标是我将使用这个脚本制作一个应用程序，我将使用Phonegap制作。所以尺寸越小越好

因此，我们的想法是实现以下目标：

我已经能够绘制这些条，确保它们具有相同的宽度，并且它们的高度取决于父容器的高度。正如您将在下面的代码中看到的，我还在选项中添加了字体大小。因为一些图表将展开大约300px的高度（例如，将使用默认的16px）。有些只有50像素，字体大小不超过12。因此，我将条形图容器缩小了fontsize（+rest）的3倍，以确保顶部（数量）和底部（图例+标题）有足够的空间

现在我不完全确定如何添加和居中数量。我尝试搜索现有的图表库，以检查它们是如何呈现的，不幸的是，它们都使用画布或SVG容器。有什么建议吗

/*数据集
------------------
添加图例
添加结果/金额
添加底部边框：两侧额外8px？
添加图表名称
*/
（函数（$）{
var方法={
初始化：函数（选项）{
返回此值。每个（函数（）{
变量$this=$（this），
dataset=options.dataset，
fontSize=options.fontSize，
widthOfContainer=$this.width（），
heightOfContainer=$this.height（）-（3*（fontSize+4）），//为标题（底部）、图例（底部）、金额（顶部）腾出空间
widthOfBar=parseInt（容器宽度/options.dataset.length）-2，
酒吧；
$this.bind（'draw'，函数（e）{
$this.empty（）；
var maxValueInDataset=Math.max.apply（Math，dataset.map（函数（o）{return o.a；}）），
heightPerUnit=parseInt（容器高度/maxValueInDataset）；
对于（var i=0；i
/*条形图
========================================================================== */
.柱状图{
颜色：黑色；
}
/*酒吧
========================================================================== */
.酒吧{
位置：绝对位置；
高度：0px；
宽度：0px；
左边距：0px；
底部：0px；
背景：黑色；
}
漂亮的图表！看起来很干净。我知道你的意思。我花了几个月的时间试图操纵bxSlider的布局，然后我意识到自己编写的代码更少。这里有一个尝试来回答你的问题。我通过使用百分比（不用担心，很容易更改），为图例、值和计数添加了一个额外的css类，并修改了插件以包含您的名称选项（称为图例），从而使其具有宽度响应性。然后这些位被格式化并追加。希望这有帮助。
/*数据集
------------------
添加图例
添加结果/金额
添加底部边框：两侧额外8px？
添加图表名称
*/
（函数（$）{
var方法={
初始化：函数（选项）{
返回此值。每个（函数（）{
变量$this=$（this），
dataset=options.dataset，
fontSize=options.fontSize，
图例=options.name，
widthOfContainer=$this.width（），
heightOfContainer=$this.height（）-（3*（fontSize+4）），//为标题（底部）、图例（底部）、金额（顶部）腾出空间
widthOfBar=parseInt（容器宽度/options.dataset.length）-2，
栏杆宽度=（栏杆宽度/容器宽度）*100，
酒吧；
$this.bind（'draw'，函数（e）{
$this.empty（）；
var maxValueInDataset=Math.max.apply（Math，dataset.map（函数（o）{return o.a；}）），
heightPerUnit=parseInt（容器高度/maxValueInDataset）；