2

我创建了一个基本的 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" }        },
    });

提前致谢！:-)

4

1 回答 1

2

通过标签，我假设您的意思是图例中的标签（即产品 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 样式，或者您碰巧有用于.legendLabelor的现有 CSS 类.legend，那肯定会解释您的问题。

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

于 2012-10-26T15:28:32.103 回答