0

長いラベルを使ってフロット バー チャットをプロットしたところ、醜い結果になりました。ラベルを 90 度回転させて表示できることがわかりましたが、次のコードを試してみましたが成功しませんでした。使用しているJavaScriptは

function onSuccess(series) {
            var tickLabels = [];
            var pieData= [];
            for (var i =0;i<series.length;i++){
                tickLabels.push([i,series[i][0]]);
            }
            var data = [series];
        var barArea = $("#barChart");  

        barArea.css("height", "400px");  
        barArea.css("width", "600px"); 


            $.plot( $("#barChart"), data, {
        series: {
         bars: {
            show:true,
            barWidth: 0.5,
            align: "center"
         },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: {
            labelWidth:12,
            labelAngle: 45,
            ticks: tickLabels
        }
        } );

チャート

ここに画像の説明を入力

誰もこれに対する解決策を知っていますか。

編集

棒グラフで凡例を使用してから、このまたはこのように棒グラフの下に凡例を配置することは可能ですか?

4

2 に答える 2

2

Flot Tickrotorプラグインを使用できます。ただし、0.7 でも機能するかどうかはわかりません。最近、0.8 で動作するように更新されましたが、下位互換性が壊れている可能性があります。

現在、プラグインの機能を 0.9 に統合する作業を行っています。

テキストを回転させるだけでもかなり奇妙に見えることに注意してください。ラベルを短くしない限り、これを避けることはできません。

于 2013-08-28T13:26:38.813 に答える
2

FlotはまだlabelAngleオプションをサポートしていません。Flot issue trackerにはいくつかの提案がありますが、どれもまだ受け入れられていません。

ラベルを90度回転させて表示できることがわかりました

あなたが見たもの (リンクしてください?) は、 labelAngleオプションをサポートする、このような Flot の分岐バージョンのようです。

于 2013-08-28T13:04:14.480 に答える