हाइकार्ट एरिया रेंज चार्ट ग्रेडियेंट के साथ जो

Question

का पालन करता है निम्नलिखित निम्न क्षेत्र श्रेणी चार्ट है जिसमें ढाल है।

http://jsfiddle.net/gXpHH/1/

मुझे क्या करना चाहते हैं ढाल वक्र का पालन करें, ताकि जमीनी स्तर के साथ किसी भी बिंदु पर रंग एक जैसा हो गया है, और यह एक ही रंग है, जब यह शीर्ष लाइन तक पहुँच पर समाप्त होता है । मुझे पूरा यकीन है कि यह वर्तमान में हाईचार्ट्स में एक विकल्प नहीं है, लेकिन मैं सिर्फ यह देखना चाहता था कि कोई इस में पहले से चला गया है या नहीं।

series: [{ 
      name: "Shade", 
      fillColor: { 
       linearGradient: [0, 0, 0, 300], 
       stops: [ 
        [0, "#4572A7"], 
        [1, "rgba(2,0,0,0)"] 
       ] 
      }, 
      data: [ 
       [0, 14733, 18890], 
       [1, 16583, 21642], 
       //... rest here 
       [10, 42417, 61955] 
      ] 
    }] 

धन्यवाद

नोट: इस Gradient Fill on Line Chart (Highcharts) रूप में एक ही के बाद से मैं ढाल की जरूरत वक्र का पालन करने के

Answer 1

कठिनाई ग्रैन्युलरिटी है: हाइचार्ट्स श्रृंखला के बिंदुओं के लिए एक एकल एसवीजी पथ खींचती है, और सहयोगी जो ढाल के साथ एक पथ है। यदि आपका श्रृंखला डेटा अपेक्षाकृत रैखिक है, तो निम्न अनुमान उपयोगी हो सकता है। देखें jsfiddle that I've created:

यह मानते हुए कि आपके श्रृंखला डेटा स्थिर नहीं है, मेरी डेमो दो श्रृंखला और एक समारोह है कि, प्रत्येक श्रृंखला के लिए, गतिशील linearGradient कि आपकी आवश्यकता के सबसे करीब आता बनाने का प्रयास करता शामिल हैं:

function getLinearGradient(series) { 
    var lastY0=null, lastY1=null, maxY0=null, maxY1=null; 
    $.each(series.data, function(key,value) { 
     maxY0 = Math.max(value[1],maxY0); 
     maxY1 = Math.max(value[2],maxY1); 
     lastY0 = value[1]; 
     lastY1 = value[2]; 
    }); 
    var firstY0 = series.data[0][2], 
     firstY1 = series.data[0][2] 
    ; 
    var minY0=maxY0, minY1=maxY1; 
    $.each(series.data, function(key,value) { 
     minY0 = Math.min(value[1],minY0); 
     minY1 = Math.min(value[2],minY1); 
    }); 
    var minY = minY0, 
     maxY = maxY1, 
     heightY = maxY - minY 
    ;   
    var gradient = { 
      x1: 10 + (((firstY0-minY)/heightY) * 80) + "%", 
      y1: "10%", 
      x2: 10 + (((lastY1-minY)/heightY) * 80) + "%", 
      y2: "90%" 
    }; 
    return gradient; 
}; 

बेशक, यह दृष्टिकोण एक पूर्ण उड़ा समाधान नहीं है और केवल तभी उपयोगी है जब आप डेटा से निपट रहे हैं जो लगभग रैखिक वक्र का पालन करता है। यहां jsfiddle

Answer 2

मुझे नहीं पता नहीं है यहाँ कोड है कि वर्तमान में ढाल उत्पन्न करता है कोई उदाहरण है, और न ही मुझे यह सुनिश्चित करने के लिए पता है कि यह पहले से ही विनिर्देशों में है, लेकिन मुझे पूरा यकीन है कि इस प्रभाव को पूरा करने का एकमात्र तरीका svg मैश ग्रेडियेंट का उपयोग करेगा।

आप मैश मैट्रिक्स के लिए पथ बिंदुओं के रूप में पथ बिंदुओं का उपयोग कर सकते हैं और जो प्रभाव चाहते हैं उसे प्राप्त कर सकते हैं।

अधिक जानकारी के लिए here देखें।