Question

我下面有一个flot图。您将看到标签被浓缩。我想在刻度线之间设置宽度，确保显示所有标签。标记如下：

<!-- Graph HTML -->
<div id="graph-wrapper">
  <div class="graph-info">
    <a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active"><span></span>
    </a>
  </div>
  <div class="graph-container">
    <div id="graph-lines" style="width: 95%; height: 80%;">
    </div>
    <div id="graph-bars" style="width: 95%; height: 80%;">
    </div>
  </div>
  <div id="series-check" class="graph-info bottom">
  </div>
</div>
<!-- end Graph HTML -->

JS：

var ticks = [];
    for (var i = 0; i < graphData[0].data.length; i++) {
        ticks.push(graphData[0].data[i][0]);
    }
$.plot($('#graph-lines'), graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: '#fff',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            //tickColor: 'transparent',
            //tickDecimals: 2, 
            mode: "time",
            ticks: ticks,
            timeformat: options["timformat"], // "%h:%M
             min: new Date(options["GraphMinXValue"]), // min milliseconds from data
             max: new Date(options["GraphMaxXValue"]) //max milliseconds from data
        },
        yaxis: {
           min: 0,
           show: true
        },
        pan: {

            interactive: true
        },
        zoom: {

            interactive: false
        }
    });

Flot graph

我真的需要图表上的百分比来允许图表重新调整大小，窗口重新调整尺寸，但我想要的是刻度线的间距以自动推动图形更大。我有溢出：隐藏在包含div并使用平移允许用户看到隐藏的溢出。有办法解决这个问题吗？

Answer 1

我建议你选择一个minTickSize，这样问题就会消失。但是如果你必须使用特定的刻度尺寸，即每小时刻度，那么两种可能的解决方案是错开/调整刻度，或增加画布尺寸。

默认情况下，Flot不支持交错/钓鱼蜱，尽管有些插件可能会有所帮助，比如Mark Cote的flot-tickrotor。尽管如此，那个还没有与Flot 0.8决赛合作。

就增加绘图大小而言，Flot无法根据刻度数自动增加其占位符;你必须自己增加它。如果您正在使用溢出：隐藏div来平移绘图，那么听起来您应该真正使用的是navigate plugin。

Answer 2

我最近使用的解决方法是将其他所有刻度线都设置为''（单个空格）。该图表似乎承认这不是一个真实值，并用真实值很好地分隔了刻度线。当网页位于较小的屏幕上时，我个人是出于调整大小的目的。

graph screenshot

如何在flot图表中分隔刻度线？

2 个答案: