2

幅 250 ピクセルの縦棒グラフがあります。シリーズに 10 個以上のアイテムがある場合は見栄えがしますが、2 ～ 3 個しかない場合、バーが非常に広く描画され、やや奇妙に見えます。

   _____
  |     |
  |     |
-----|-----

シリーズ設定で幅を設定できます：

{
  style: { width: 25 }
}

これは機能しますが、細いバーは以前の位置に左揃えのままであるため、軸の目盛りとラベルと一致しません。

そのようです：

   _
  | |
  | |
-----|-----

軸の間隔を変更したくありません。幅の広い 25 ピクセルのバー (軸の目盛りの中央に正しく配置されています) を使用したいです。

     _
    | |
    | |
-----|-----

何か案は？

4

5 に答える 5

2

少し遅いかもしれませんが、これが私の解決策です

renderer: function(sprite, record, attr, index, store) {                    

    return Ext.apply(attr, {
        fill: color,
        width: 50,
        x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
    });
}

この例では、x 軸を読み取り、バーをループしたよりも任意のポイント (ラベル ストライプ) を見つけます。カウントまたは何かを使用して、値の代わりに使用できます。それがうまくいくことを願っています！

于 2013-09-06T21:38:42.703 に答える
1 
//try like below
series:[
    {...
        style:{
            minBarWidth:5,
            maxBarWidth:5
        }
    },
    {...}
]
于 2017-02-07T12:32:23.087 に答える
0

問題は、探しているグラフがデカルトであり、正確な X 値がないため、縦棒グラフが機能しないことだと思います。

したがって、次のような縦棒グラフのように見えるように、デカルト グラフ (折れ線グラフなど) をシミュレートします。

ここに画像の説明を入力

どういうわけかトリックですが、私にとってはうまくいきます。

axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['min-X','max-X']
}, {
        type: 'Numeric',
        position: 'left',
        fields: ['min-Y','max-Y']
}],

series: [{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line1-X',
        yField: 'line1-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line2-X',
        yField: 'line2-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line3-X',
        yField: 'line3-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
},{
        type: 'line',
        axis: ['bottom', 'left'],
        xField: 'line4-X',
        yField: 'line4-Y',
        showMarkers: false,
        style: {
                stroke: '#ccc',
                'stroke-width': 10
        }
}]

そしてデータ：

{
        line1-X: 2,   line1-Y: 0,
        line2-X: 5,   line2-Y: 0,
        line3-X: 5.5, line3-Y: 0,
        line4-X: 8,   line4-Y: 0,

        min-X: 0,  min-Y: 0,
        max-X: 10, max-Y: 100
},{
        line1-X: 2,   line1-Y: 40,
        line2-X: 5,   line2-Y: 80,
        line3-X: 5.5, line3-Y: 60,
        line4-X: 8,   line4-Y: 100,

        min-X: 0,  min-Y: 0,
        max-X: 10, max-Y: 100
}

ただし、このアプローチでは、列 (​​行) の最大数を知る必要があります。そして毎回、表示したくないデータに Zero(0) データを挿入します。列 (行) の数がわからない場合は、動的に作成する必要があります。

これは私のアイデアであり、私が望むように機能します。解決策を見つけるのに役立つかもしれません。

于 2012-04-21T15:30:14.797 に答える
0

「ガター」プロパティを使用して、列間のギャップを設定してみてください。

于 2013-12-16T12:22:49.210 に答える