jquery flot 重叠两个标签

Question

大家好，我正在处理两个标签的图形，但问题是标签重叠，我想要的是一个相邻的条，以便在我所拥有的类别之间的比较中可见被展示。有一些属性允许我将它们分开并且它们不重叠？

var ms_data = [{
    "label": "Bar1",
    "data": [
        [0, 20],
        [1, 10],
        [2, 4],
        [3, 5],
        [4, 2]
    ]
}, {
    "label": "Bar2",
    "data": [
        [0, 15],
        [1, 8],
        [2, 9],
        [3, 3],
        [4, 7]
    ]
}, ];
var ms_ticks = [
    [0, "category1"],
    [1, "category2"],
    [2, "category3"],
    [3, "category4"],
    [4, "category5"]
];

function plotWithOptions() {
    $.plot($("#placeholder"), ms_data, {
        bars: {
            show: true,
            barWidth: 0.6,
            series_spread: true,
            align: "center"
        },
        xaxis: {
            ticks: ms_ticks,
            autoscaleMargin: .10
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });
}
plotWithOptions();

Answer 1

我想问题要么出在绘图的尺寸上，要么出在标签的字体大小上。

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

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();
    
});

.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;
}

<!-- 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>

jquery flot 重叠两个标签

jquery flot overlapping two labels

jquery

graph

flot