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




css ria (5)

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

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'
    }]
});

Answers

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

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


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;

        }}]
});​

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


यदि यह सही लगता है, तो 300 से 300 तक ऊंचाई बदलें:

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 150,

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

axisRange = to - from,

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

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

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


जहां तक ​​मुझे पता है, हासिल करने का सबसे अच्छा तरीका एक्सटेंशन और जटिल कोडिंग के बिना ऐसा है:

     date.toLocaleString([], { hour12: true});

जावास्क्रिप्ट एएम / पीएम प्रारूप

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to display the date and time as a string.</p>

    <button onclick="myFunction()">Try it</button>
    <button onclick="fullDateTime()">Try it2</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var d = new Date();
            var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit' });
            document.getElementById("demo").innerHTML = n;
        }
        function fullDateTime() {
            var d = new Date();          
            var n = d.toLocaleString([], { hour12: true});
            document.getElementById("demo2").innerHTML = n;
        }
    </script>
</body>
</html>

मैंने यह सवाल इस प्रश्न की जांच में पाया।

मैं सेकेंड प्रदर्शित किए बिना .toLocaleTimeString () का उपयोग कैसे करूं?





javascript css extjs ria