27

次のドキュメントのライブコード例を試してみてください。

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Bar

複数のラベルが美しく見えます：

2つのラベルが付いた棒グラフ

data: [
    { 'name': 'metric one',  'data':5 },
    { 'name': 'metric two',  'data':27 }
]

ただし、データセットを1つのラベルに減らすとすぐに、出力はひどく見えます（バーのラベルは、ラベルを付けるバーと垂直に整列するのではなく、グラフ領域の上部の半分外側に表示されます）。

1つのラベルの棒グラフ

これはExtJSのバグですか？これを回避するにはどうすればよいですか？この出力を生成する正確なExtJSコード：

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',  'data':5 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Sample Values',
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Sample Metrics'
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        highlight: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
          }
        },
        label: {
            display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data'
    }]
});
4

5 に答える 5

1

1つの解決策は、交換することです

axisRange = to - from,

ExtJSのAxis.jsの383行目で

axisRange = to - from == 0 ? 1 : to - from,

y軸ラベルの座標にゼロ除算が割り当てられるのを防ぎます。

于 2012-11-29T13:34:38.587 に答える
0

正しいと思われる場合は、高さを300から150に変更してください。

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 150,
于 2013-02-07T16:38:02.967 に答える
0

はい、1 つのレコードだけの場合、既定のレンダリングは奇妙に見えます。
ただし、修正または回避できます。

概念的には、シリーズ レンダラーをオーバーライドして、単一レコードの場合に高さと y ポイントを修正します -


renderer: function(sprite, record, attr, index, store) {
    if (store.getCount() == 1) {
        attr.height = 80;
        attr.y = 75;
    }
    return attr;
}

ここに画像の説明を入力

実際の上書きされた値 ( attr.height and attr.y) を視覚的なニーズに合わせて変更できます。

これは、期待どおりに見えるように変更された例です。


var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        {'name': 'metric one','data': 5}
        //,{'name': 'metric two','data': 7}
    ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Sample Values',
        grid: true,
        minimum: 0},
    {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Sample Metrics'}],
    series: [{
        type: 'bar',
        axis: 'bottom',

        highlight: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
            }
        },
        label: {
            display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data',
        renderer: function(sprite, record, attr, index, store) {
            if (store.getCount() == 1) {
                attr.height = 80;
                attr.y = 75;
            }
            return attr;

        }}]
});​
于 2012-11-28T18:28:42.687 に答える
0

問題は 1 つのバーにあるのではなく、範囲が原因であるため、範囲が広く、ラベルが 1 つのバーで繰り返されない場合は、バージョン 4.2 で修正されていると聞いてうれしいです。試してみたらこれを確認してください。

于 2013-05-23T18:55:16.097 に答える