将图例添加到自制条形图中

Question

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

哦,这很有趣:)主要目标是我将使用这个脚本为我将使用Phonegap制作的应用程序.所以尺寸越小越好.

所以想法是实现以下目标:

我已经能够绘制条形图,确保它们具有相等的宽度并且其高度取决于父容器的高度.正如您在下面的代码中看到的,我还为选项添加了字体大小.因为某些图表将扩展到300px的高度(例如,使用默认的16px).有些只有50像素,字体大小为12或更小.因此我将ChartContainer栏缩小了3 x fontsizes(+ rest)以确保顶部(金额)和底部(图例+标题)有足够的空间

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

/* dataset
   ------------------

   add legends
   add result / amount
   add bottom-border: 8px extra to both sides?
   add chart name

 */

(function ($) {

    var methods = {
        init : function(options) {
            return this.each(function() {

                var $this = $(this),
                    dataset = options.dataset,
                    fontSize = options.fontSize,
                    widthOfContainer = $this.width(),
                    heightOfContainer = $this.height() - (3 * (fontSize + 4)), // make room for title (bottom), legend (bottom), amounts (top)
                    widthOfBar = parseInt(widthOfContainer / options.dataset.length) - 2,
                    bar;

                $this.bind('draw', function(e) {
                    $this.empty();

                    var maxValueInDataset = Math.max.apply(Math, dataset.map(function(o){return o.a;})),
                        heightPerUnit = parseInt(heightOfContainer / maxValueInDataset);
                    for (var i = 0; i < dataset.length; i++) {
                        bar = $(document.createElement('div'));
                        bar.addClass('bar');
                        bar.css({
                            'height': parseInt(dataset[i].a * heightPerUnit) + 'px',
                            'width': parseInt(widthOfBar) + 'px',
                            'margin-left': parseInt(i * 2 + i * widthOfBar) + 'px',
                            'bottom': 2 * (fontSize + 4)
                        });
                        $this.append(bar);
                    }
                });

                $this.trigger('draw');
            });
        },
        draw : function(n) {
            $(this).trigger('draw');
        }
    };

    $.fn.chart = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }
    };

    $(document).ready(function(){
        $('div.barchart').chart({
            // Add font-size?
            fontSize: 14,
            name: 'mana cost',
            dataset: [
                {a: 2, label: '0'},
                {a: 8, label: '1'},
                {a: 9, label: '2'},
                {a: 4, label: '3'},
                {a: 7, label: '4'},
                {a: 3, label: '5'},
                {a: 1, label: '6'},
                {a: 1, label: '7'},
                {a: 2, label: '8'},
                {a: 5, label: '9'}
            ]
        });
    });
}( jQuery ));

/* Barchart
   ========================================================================== */

.barchart {
  color: black;
}

/* Bar
   ========================================================================== */

.bar {
  position: absolute;
  height: 0px;
  width: 0px;
  margin-left: 0px;
  bottom: 0px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 20px;">
            <div class="barchart" style="height: 100px; position: relative"></div>
        </div>

Answer 1

不错的图表！看起来很干净。我明白你的意思。我花了几个月的时间尝试操纵 bxSlider 的布局，然后我意识到自己编写的代码更少。这是回答您的询问的尝试。我通过使用百分比使其宽度响应（不用担心；很容易改回来），为图例、值和计数添加了一个额外的 css 类，并修改了您的插件以包含您的名称选项（称为图例） 。然后，这些位将被格式化并附加。希望这可以帮助。

/* dataset
   ------------------

   add legends
   add result / amount
   add bottom-border: 8px extra to both sides?
   add chart name

 */

(function ($) {

    var methods = {
        init : function(options) {
            return this.each(function() {

                var $this = $(this),
                    dataset = options.dataset,
                    fontSize = options.fontSize,
                    legend = options.name,
                    widthOfContainer = $this.width(),
                    heightOfContainer = $this.height() - (3 * (fontSize + 4)), // make room for title (bottom), legend (bottom), amounts (top)
                    widthOfBar = parseInt(widthOfContainer / options.dataset.length) - 2,
                    widthOfBarPer = (widthOfBar / widthOfContainer) *100,
                    bar;

                $this.bind('draw', function(e) {
                    $this.empty();

                    var maxValueInDataset = Math.max.apply(Math, dataset.map(function(o){return o.a;})),
                        heightPerUnit = parseInt(heightOfContainer / maxValueInDataset);
                    for (var i = 0; i < dataset.length; i++) {
                    		var dataVal = dataset[i].a;
                        bar = $(document.createElement('div'));
                        bar.addClass('bar');
                        bar.css({
                            'height': parseInt( dataVal * heightPerUnit) + 'px',
                            'width': widthOfBarPer + '%', // percentages to make more responsive?
                            'margin-left': (i + i * widthOfBarPer ) + '%', // no need to parseInt as you have already on widthOfBar. now your chart stretches with the width .
                            'bottom': 2 * (fontSize + 4)
                        });
                        bar.append('<p class="count">'+ i +'</p>');	// defines the bar count, this could be dataset[i].label but if you just use i then you don't need to type it out for each bar?
                        bar.append('<p class="value">'+ dataVal +'</p>');	// defines the bar value
                        $this.append(bar); // adds the bar count
                    }
                    var chartHeight = $this.height();
                    $('.bar .count').css({ bottom: fontSize - chartHeight * 0.5 });
                    $('.bar .value').css({ bottom: chartHeight * 0.5 - fontSize });
                    if(legend){
												legend = '<p class="legend">'+legend+'</p>';
											  $this.append(legend);
                  //      $this.css({ border: '1px solid #f90'}); // temp to see the current chart size
                        $this.find('.legend').css({ top: chartHeight - fontSize });
                    }
                });

                $this.trigger('draw');
            });
        },
        draw : function(n) {
            $(this).trigger('draw');
        }
    };

    $.fn.chart = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }
    };

    $(document).ready(function(){
        $('div.barchart').chart({
            // Add font-size?
            fontSize: 14,
            name: 'mana cost',
            dataset: [
                {a: 2, label: '0'},
                {a: 8, label: '1'},
                {a: 9, label: '2'},
                {a: 4, label: '3'},
                {a: 7, label: '4'},
                {a: 3, label: '5'},
                {a: 1, label: '6'},
                {a: 1, label: '7'},
                {a: 2, label: '8'},
                {a: 5, label: '9'}
            ]
        });
    });
}( jQuery ));

/* Barchart
   ========================================================================== */

.barchart {
  color: black;
}

/* Bar
   ========================================================================== */

.bar {
  position: absolute;
  height: 0px;
  width: 0px;
  margin-left: 0px;
  bottom: 0px;
  background: black;
}

.count, .value{
  z-index: 7;
  position: absolute;
  text-align: center;
  width: 100%;
}

.legend{
  position: relative;
  text-align: center;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 20px;">
            <div class="barchart" style="height: 100px; position: relative"></div>
        </div>