Flot

Question

我的flot图表有问题，如果我在xaxis上有长文本，它们会相互重叠，所以文本信息不好而且不可读。注意：xaxis 标签不应该旋转，它应该是相同的角度。只能放在其他文字的下方或上方。

我制作了简单的 jsfiddle 代码，这里是 link：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;
}

Flot - 如何使 xaxis 标签不相互重叠

Flot - How to make xaxis label not overlap each other

javascript

jquery

css