javascript - मैं बार के लेबल को ठीक से दिखाने के लिए एक बार के साथ ExtJS 4.1.X बार चार्ट कैसे प्राप्त करूं?




css ria (4)

ExtJS 4.2 को अपडेट करना इसे ठीक करना चाहिए।

https://code.i-harness.com

यदि आप दस्तावेज़ में लाइव कोड उदाहरण का प्रयास करते हैं:

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

एक से अधिक लेबल सुंदर दिखते हैं:

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

हालांकि जैसे ही आप डेटासेट को एक लेबल तक कम करते हैं, आउटपुट भयानक लग रहा है (बार के लिए लेबल बार के लेबल के साथ लंबवत रूप से गठबंधन के बजाय चार्ट क्षेत्र के शीर्ष के बाहर आधा दिखाई देता है):

क्या यह एक्स्टजेएस में एक बग है? मैं इसके आसपास कैसे काम करूं? सटीक 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'
    }]
});

एक समाधान को प्रतिस्थापित करना है

axisRange = to - from,

एक्स्टजेस में एक्सिस.जेएस की लाइन 383 पर

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

धुरी लेबल के y समन्वय को आवंटित शून्य द्वारा विभाजित करने के लिए।


समस्या एक बार में नहीं है, यह सीमा के कारण है, इसलिए यदि आपके पास विस्तृत श्रृंखला है और एक बार लेबल दोहराए जाएंगे, तो यह सुनकर बहुत अच्छा लगता है कि यह संस्करण 4.2 में तय है, अगर आप इसे आजमाएं तो इसकी पुष्टि करें।


हां, डिफ़ॉल्ट प्रतिपादन अजीब लग रहा है जब यह केवल एक रिकॉर्ड है।
हालांकि यह तय या काम किया जा सकता है।

अवधारणा में, एकल रिकॉर्ड के मामले में ऊंचाई और वाई बिंदु को ठीक करने के लिए श्रृंखला रेंडरर को ओवरराइड करें -


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;

        }}]
});​