1

私はjqplot水平棒グラフに取り組んできました。

この出力が欲しい（ポイントラベルをパーセンテージで表示したいので、グラフの開始点に配置する必要があります）

期待される出力

これが私のコードです.....

$.jqplot.config.enablePlugins = true;

voteResults = [[Chinabank,0],['Citibank',100], ['UOB',0]['POSB',0],['OCBC',0]];
// voteResults = [[Chinabank,50],['Citibank',50], ['UOB',0]['POSB',0],['OCBC',0]];

plot = $.jqplot('chart1', [voteResults], {
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth:15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions:{
                showGridline:true,
                markSize:0
            }
        },
        xaxis:{
            ticks:[0,100],
            tickOptions:{formatString:'%d\%'}
        }
    }
});

現在、ポイントラベルは棒グラフの終了後に表示され、ポイント値が100％に近い場合は、何も表示されません。そして、ポイントは整数で表示されます。

棒グラフの始点近くに点を移動する方法はありますか？

上記のコードはこれらのサンプル出力を表示します…私はあなたが私の問題を解決するのを手伝ってくれることを願っています:(

サンプル出力1

サンプル出力2

ありがとうございました ：）

4

2 に答える 2

2

どういうわけか、@ Mattの助けを借りて問題を解決することができました。また、必要な要件を満たすために数行のコードを追加しました。棒グラフの開始点にポイントラベルを配置する代わりに、読みやすく見やすくするために中央に配置しました。

これが私のコードです:(より良い解決策があると感じたら、私は提案を受け付けています）ありがとう

var plot = $.jqplot('PollChart', [voteResults], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'e', edgeTolerance: -50 },
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth: 15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                showGridline: true,
                markSize: 0
            }
        },
        xaxis: {
            ticks: [0, 100],
            tickOptions: {
                formatString: '%d%',
                showGridline: false
            }
        }
    }
});

// these lines here positions the Point Labels at the center of the graph
var ChartStartingPoint = parseInt($('#PollChart .jqplot-series-canvas').css('left'),10);
var ChartWidth = parseInt($('#PollChart .jqplot-series-canvas').css('width'),10);
var PointLabelLocation = (ChartWidth/2)+ ChartStartingPoint;
$('#PollChart .jqplot-point-label').css('left',PointLabelLocation+'px');
于 2011-04-15T10:57:35.223 に答える
1

バーが 100% に近いときにラベルを表示できるようにするには、PointLabelsedgeToleranceオプションを使用します。

エッジ公差

ラベルを描画するために、ラベルが軸の境界から離れていなければならないピクセル数。負の値を指定すると、グリッド境界とのオーバーラップが許可されます。

あなたの質問にコメントしたように、これらのチャートを生成するために使用したコードを実際に投稿したかどうかはわかりません. これはそのコードの直接のダンプです (タイプミスは修正されています)。これは私があなたの写真に最も近いもので、元のコードに多くの変更が加えられています。

これらの例をどのように生成したかを示す jsfiddle を投稿してもよろしいですか?

于 2011-04-15T04:44:01.883 に答える