2015-10-18 6 views

उत्तर

8

आपका उदाहरण के द्वारा प्राप्त किया जा सकता का उपयोग कर किसी भी तरह से बनाया जा करने के लिए यह संभव है ZingChart नामक एक वैकल्पिक चार्टिंग लाइब्रेरी का उपयोग करना। आप एक निश्चित मूल्य सीमा के आधार पर न्यूनतम प्रकार और अधिकतम रंग क्षेत्रों को सेट करने के लिए चार्ट प्रकार "range" और rules सुविधा का उपयोग कर सकते हैं। क्षैतिज लाल और नीली रेखाएं स्केल-एक्स मार्करों का उपयोग करके हासिल की जा सकती हैं।

नीचे दिए गए उदाहरण को देखें कि आप जो खोज रहे हैं उसे प्राप्त करने के लिए आप ज़िंगचर्ट का उपयोग कैसे करेंगे। मैं ज़िंगचर्ट टीम पर हूं इसलिए यदि आपको किसी और मदद की ज़रूरत है तो हमसे संपर्क करने में संकोच न करें।

var myConfig = { 
 
    type:"range", 
 
    backgroundColor : "white", 
 
    scaleX:{ 
 
     maxItems:8, 
 
     zooming:1, 
 
    }, 
 
    scaleY:{ 
 
     minValue:"auto", 
 
     markers : [ 
 
     { 
 
      type : "line", 
 
      range : [70], 
 
      lineColor : "red" 
 
     }, 
 
     { 
 
      type : "line", 
 
      range : [30], 
 
      lineColor : "blue" 
 
     } 
 
     ] 
 
    }, 
 
    "series":[ 
 
     { 
 
      lineWidth:2, 
 
      lineColor:"#8100a4", 
 
      marker:{ 
 
      type:"none" 
 
      }, 
 
      values : [[60,60],[70,70],[78,70],[75,70],[70,70],[50,50],[60,60],[60,60],[60,60],[34,34],[35,35],[35,35],[35,35],[30,30],[24,30],[26,30],[25,30],[28,30],[30,30],[32,32]], 
 
      backgroundColor:"#1049c4", 
 
      rules:[ 
 
      { 
 
       rule:"%node-max-value < %node-min-value", 
 
       backgroundColor:"#c00" 
 
      } 
 
      ], 
 
      minLine:{ 
 
      lineColor:"#8100a4", 
 
      }, 
 
      maxLine:{ 
 
      lineColor:"#8100a4" 
 
      } 
 
     } 
 
    ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t width: 500 
 
});
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/2.1.4/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.4/modules/";</script></head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

+0

आप धन्यवाद, लेकिन मैं पहले से ही गूगल चार्ट एपीआई के माध्यम से एक व्यापक मात्रा में विकसित किया है, और मैं वहाँ लेकर चार्ट और डैशबोर्ड सुविधाओं पर निर्भर हैं। ऐसा लगता है कि इस प्रकार के चार्ट google api के माध्यम से संभव नहीं हैं इसलिए के उत्तर के लिए आपको बहुत बहुत धन्यवाद, मुझे इस एपीआई पर स्विच करना होगा। आशा है कि Google की तरह कुछ था – Buddhi741

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