4

我在下面有一个流动图。你会看到标签被压缩了。我想让刻度之间的宽度确保显示所有标签。标记如下：

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

流程图

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

4

2 回答 2

2

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

默认情况下，Flot 不支持交错/倾斜刻度，尽管有一些插件可能会有所帮助，例如 Mark Cote 的flot-tickrotor。不过，那个还不能与 Flot 0.8-final 一起使用。

至于增加绘图大小，Flot 不能根据刻度数自动增加其占位符；你必须自己增加它。如果您使用 overflow:hidden div 来平移绘图，那么听起来您可能真正应该使用的是navigate plugin。

于 2013-06-20T10:52:30.597 回答
0

我最近使用的一种解决方法是将每隔一个刻度线设置为“”（一个空格）。该图表似乎承认这不是一个真实值，并且很好地将刻度线与真实值隔开。当网页在较小的屏幕上时，我个人这样做是为了调整大小。

图表截图

于 2018-07-05T19:30:10.750 回答