2016-08-01 5 views
5

मैं हाईचार्ट्स का उपयोग कर रहा हूं, लेकिन मेरा प्रश्न सामान्य रूप से है। मैं जानना चाहता हूं कि कौन सा चार्ट 2 तिथियों के बीच मूल्यों में परिवर्तन दिखाने के लिए एक आदर्श मैच है।2 तिथियों के बीच मूल्यों में परिवर्तन दिखाने के लिए मुझे किस चार्ट प्रकार का चयन करना चाहिए?

उदा ऋण दर, उदा, 29 अगस्त: 21.2 30 अगस्त: 21.3

परिवर्तन 0.1 मिलियन है।

इस छोटे अंतर को स्पष्ट रूप से ध्यान देने योग्य दिखाने के लिए मुझे किस चार्ट प्रकार का चयन करना चाहिए?

+0

तो आप एक ही चार्ट पर बड़े मूल्य और छोटे मूल्य दिखाना चाहते हैं? आप इस मामले में एकाधिक वाई अक्ष का उपयोग कर सकते हैं। इस उदाहरण को देखें: http://www.highcharts.com/stock/demo/candlestick-and-volume –

+0

मैं केवल 2 मानों को पूरा करना चाहता हूं, और दृश्य दृश्य में अंतर दिखा सकता हूं। जैसे, कल के बनाम मूल्य का मूल्य। तो हर मामले में मेरे पास 2 मान और अंतर होगा। मुझे नहीं लगता कि candlestick मेरी आवश्यकता के लिए एक अच्छा मैच है। उत्तर देने के लिये धन्यवाद। कोई अन्य विचार? – ZEE

+0

मैंने कभी नहीं सोचा था कि candlestick अच्छा विचार होगा, मैं सिर्फ आपको दो वाई अक्षों के साथ चार्ट का एक उदाहरण दिखाना चाहता था। –

उत्तर

2

संबंधित मानों को इंगित करने के लिए डेटा लेबल के साथ एक साधारण बार चार्ट उपयोगकर्ताओं को दिखाने में मददगार होगा कि मूल्य में बहुत छोटा बदलाव है।

नीचे कोड स्निपेट देखें। मैंने आपके उदाहरण मानों के साथ एक बार चार्ट के लिए मूल हाईचार्ट्स डेमो में से एक को संशोधित किया।

मुझे आशा है कि यह आपके लिए सहायक होगा!

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { type: 'bar' }, 
 
     title: { text: 'Sample Chart' }, 
 
     xAxis: { 
 
      categories: ['29-Aug','30-Aug'], 
 
      title: { text: null } 
 
     }, 
 
     yAxis: { min: 0 }, 
 
     tooltip: { valueSuffix: ' million' }, 
 
     plotOptions: { 
 
      bar: { 
 
       dataLabels: { 
 
        crop: false, 
 
        overflow: 'none', 
 
        enabled: true, 
 
        style: { fontSize: '18px' } 
 
       } 
 
      } 
 
     }, 
 
     legend: { enabled: false }, 
 
     credits: { enabled: false }, 
 
     series: [{ 
 
      name: 'Sample Series', 
 
      data: [21.2,21.3] 
 
     }] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>

6

आप दो तिथियों/मूल्यों की तुलना कर रहे हैं, तो मैं एक bar chart का उपयोग कर की सिफारिश करेंगे। (यदि आप महीनों या वर्षों में मूल्यों की तुलना कर रहे हैं, तो मैं line या area चार्ट का उपयोग करने का सुझाव दूंगा।) आप specifying the minimum, maximum, and step scale values द्वारा दो ऋण दर मानों के बीच अंतर पर जोर दे सकते हैं ताकि 0.1 मिलियन अंतर स्पष्ट रूप से चित्रित किया जा सके। पैमाने अनुकूलन और स्वरूपण पर

var myConfig = { 
 
    type: 'bar', 
 
    title: { 
 
    text: 'Lending Rate', 
 
    fontFamily: 'Georgia' 
 
    }, 
 
    utc: true, 
 
    timezone: 0, 
 
    scaleX: { 
 
    transform: { 
 
     type: 'date', 
 
     all: '%M %d, %Y' 
 
    }, 
 
    step: 86400000, 
 
    item: { 
 
     fontSize: 10 
 
    } 
 
    }, 
 
    scaleY: { 
 
    values: '21.1:21.4:0.1', 
 
    format: '%vM', 
 
    decimals: 1, 
 
    item: { 
 
     fontSize: 10 
 
    }, 
 
    guide: { 
 
     lineStyle: 'dotted' 
 
    } 
 
    }, 
 
    plot: { 
 
    barWidth: '50%', 
 
    borderWidth: 1, 
 
    borderColor: 'gray', 
 
    backgroundColor: '#99ccff', 
 
    valueBox: { 
 
     text: '%v million', 
 
     fontSize: 12, 
 
     fontColor: 'gray', 
 
     fontWeight: 'normal' 
 
    }, 
 
    tooltip: { 
 
     text: '%v million' 
 
    } 
 
    }, 
 
    series: [ 
 
    { 
 
     values: [ 
 
     [1472428800000, 21.2], 
 
     [1472515200000, 21.3], 
 
     ] 
 
    } 
 
    ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 

 
<div id='myChart'></div>

अधिक के लिए, यह X/Y-Axis Scales Tutorial देखें: नीचे डेमो देखें। value boxes और tooltips का उपयोग नोड मानों के बारे में और जानकारी प्रदान करने के लिए भी किया जा सकता है।

उम्मीद है कि मदद करता है। मैं ZingChart टीम का सदस्य हूं, और आगे के सवालों के जवाब देने में प्रसन्न हूं।

संबंधित मुद्दे