jquery flot重叠两个标签

Question

大家好我正在使用两个标签的图形，但问题是标签重叠，我想要的是另一个旁边的条，这样我可以看到类别之间的比较被展示。有一些属性允许我将它们分开并且它们不重叠吗？

source 'http://rubygems.org'
gem 'rails', '4.2.0'
gem "airbrake"
#gem "mysql"
#gem 'mysql2',  '~>0.3.7'
gem 'mysql2', '~>0.3.9'
gem 'fastercsv'
gem 'newrelic_rpm', :group => [:production, :staging]
gem "xml-simple", :require => "xmlsimple"
gem "will_paginate", "~> 3.0.0"
gem "json", '1.7.7'
gem "default_value_for"
gem "whenever"
gem 'charlock_holmes'
gem 'rails_autolink'
gem 'mocha'
gem 'daemons'
gem "paperclip", "~> 4.2"
gem 'thread_safe', '0.3.5'
gem 'web-console', '~> 2.1.2'

group :development do
 gem 'capistrano'
 gem 'capistrano-ext'
 gem 'railroady'

end

Answer 1

我认为问题出在你的情节尺寸或标签字体大小上。

如果你在谈论酒吧而不是标签，那么为了防止重叠，你必须使用flot-orderBars插件（请注意bars { order: X }内的ms_data对象元素）：

＆＃13;

＆＃13;

jQuery(document).ready(function() {
    
    var ms_data = [{
        "label": "Bar1",
        "data": [
            [0, 20],
            [1, 10],
            [2, 4],
            [3, 5],
            [4, 2]
        ],
        bars: {
           order: 0
        }
    }, {
        "label": "Bar2",
        "data": [
            [0, 15],
            [1, 8],
            [2, 9],
            [3, 3],
            [4, 7]
        ],
        bars: {
           order: 1
        }
    }, ];
                   var ms_ticks = [
                   [0, "category1"],
        [1, "category2"],
            [2, "category3"],
                [3, "category4"],
                    [4, "category5"]
                    ];
    
    function plotWithOptions() {
        $.plot($("#placeholder"), ms_data, {
            bars: {
                show: true,
                barWidth: 0.3,
                /*series_spread: true,*/
                align: "center"
            },
            xaxis: {
                ticks: ms_ticks,
                autoscaleMargin: .10
            },
            grid: {
                hoverable: true,
                clickable: true
            }
        });
    }
    plotWithOptions();
    
});

＆＃13;

.demo-container {
	box-sizing: border-box;
	width: 640px;
	height: 400px;
	padding: 20px 15px 15px 15px;
	margin: 15px auto 30px auto;
	border: 1px solid #ddd;
	background: #fff;
}

.demo-placeholder {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

.legend table {
	border-spacing: 5px;
}

＆＃13;

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- jquery.flot -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<!-- Order Bars plugin -->
<script src="https://raw.githubusercontent.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>


<div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
</div>

＆＃13;

＆＃13;

＆＃13;