Flot - 如何使xaxis标签彼此不重叠

Question

我有一个flot图表的问题，如果我在xaxis中有长文本，它将相互重叠，因此文本信息不好并且不可读。注意：xaxis标签不应该旋转，它应该是相同的角度。只能把它放在其他文本的下方或上方。

我制作简单的jsfiddle代码，这里是链接：http://jsfiddle.net/t3Vqh/240/

options = {
              series: {
                  bars: {
                      show: true
                  }
              },
              bars: {
                  align: "center",
                  barWidth: 0.5,
                  fill: 1,
                  fillColor: null
              },
              xaxis: {
                  axisLabelFontSizePixels: 12,
                  axisLabelFontFamily: 'Open Sans',
                  axisLabelPadding: 10,
                  ticks: [
                [1, "Testing a long text overlapTesting a long text overlap"],
                [2, "Testing a long text overlapTesting a long text overlap"],
                [3, "Testing a long text overlap"]
            ],
                  min: -0.5,
                  max: 4.5
              },
              yaxis: {
                  axisLabelUseCanvas: false,
                  axisLabelFontSizePixels: 12,
                  axisLabelFontFamily: 'Open Sans',
                  axisLabelPadding: 3,
                  tickColor: "#ffffff",
                  font: { color : "#fff" }
              },
              legend: {
                  noColumns: 0,
                  labelBoxBorderColor: "#000000",
                  position: "nw"
              },
              grid: {
                  borderWidth: 2,        
                  backgroundColor: "#000000",
                  margin: {"top" : 30}
              }
          };

我已经搜索过了，无法找到关于此问题的答案。

Answer 1

尝试此操作，然后您可以在工具提示中悬停显示完整名称。

.tickLabel {
    text-overflow: ellipsis;
    width: 10%;
    overflow: hidden;
    white-space: nowrap;
}