Question

我创建了一个基本的Flot图表，但标签太大，它们覆盖了整个图表。谁能指导我？我查看了flot文档，但是我看不到我设置的选项会导致这种情况。

要清楚，我的意思是我得到一个与绘图颜色对应的小彩色方块，然后是大量的空白区域，然后是系列的标签，然后加载更多的空白区域。

以下是我创建图表的方式：

        var d1 = [[0,5],[24, 5]];    
    var d2 = [[0,4],[64, 4]];
    var d3 = [[0,3],[2, 3]];
    var d4 = [[0,2],[49, 2]];       
    var d5 = [[0,1],[20, 1]];

var data1 = [
    {    
        label: "Product 1",
        data: d1,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 5,
            fill: true,
            fillColor:  "#AA4643",
            horizontal : true

        }
    },
    {
        label: "Product 2",
        data: d2,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 4,
            fill: true,
            fillColor:  "#89A54E",
            horizontal : true
        }
    },

    {
        label: "Product 3",
        data: d3,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 3,
            fill: true,
            fillColor:  "#4572A7",
            horizontal : true
        }
    },
    {
        label: "Product 4",
        data: d4,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 2,
            fill: true,
            fillColor:  "#80699B",
            horizontal : true
        }
    },
    {
        label: "Product 5",
        data: d5,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 1,
            fill: true,
            fillColor:  "#11111B",
            horizontal : true
        }
    }
];


    jQuery.plot(jQuery("#myplaceholder"+1), data1, {colors: ["#AA4643", "#89A54E", "#4572A7", "#80699B", "#11111B"], yaxis: {show:false},
    xaxis: {     font: { size: 11, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }        },
    });

提前致谢！： - ）

Answer 1

通过标签，我认为你的意思是图例中的标签（即产品1）。

最可能的原因是你的页面中有CSS，它为某些不相关的东西指定了一些样式，并且它们正在渗透到图例中。 Flot使用具有这种结构的html表来创建图例：

<div class="legend">
<div>
<table>
  <tr> 
    <!--This is the color box for each series, the divs are styled and colored to make it look pretty -->
    <td class="legendColorBox"><div><div></div></div></td>
  </tr>
  <tr>
    <td class="legendLabel">Product 1</td>
  </tr>
  <!-- repeated for each series -->
</table>
</div>
</div>

因此，如果您的所有td元素都有CSS样式，或者您恰好有.legendLabel或.legend的现有CSS类，那肯定会解释您的问题。

如果您查看此示例，您会发现没有任何CSS的代码没有任何问题：http://jsfiddle.net/ryleyb/AkqyC/

如何在Flot中设置标签的宽度？

1 个答案: