如何在流程图中间隔刻度线？

我下面有一个流程图。您将看到标签被压缩。我想使刻度之间的宽度确保显示所有标签。标记如下：

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

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

我确实需要图表上的百分比来允许图表随着窗口大小的调整而调整大小，但我想要的是刻度线的间距自动将图表推得更大。我在包含的div上设置了overflow:hidden，并使用平底锅让用户可以看到隐藏的溢出。有没有办法来解决这个问题？

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

Flot 默认情况下不支持交错/钓鱼刻度，尽管有一些插件可能会有所帮助，例如 Mark Cote 的浮标转子 https://github.com/markrcote/flot-tickrotor。不过，这个还不能与 Flot 0.8-final 一起使用。

至于增加绘图大小，Flot 无法根据刻度数自动增加其占位符；你必须自己增加它。如果您使用 Overflow:hidden div 来平移绘图，那么听起来您可能真正应该使用的是导航插件 http://www.flotcharts.org/flot/examples/navigate/index.html.