2

基本的な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>

したがって、すべての要素のどこかにCSSスタイルがある場合、またはまたはtdの既存のCSSクラスがある場合は、それで問題が確実に説明されます。.legendLabel.legend

この例を見ると、CSSのないコードに問題がないことがわかります：http： //jsfiddle.net/ryleyb/AkqyC/

于 2012-10-26T15:28:32.103 に答える