बार नोड द्वारा भरा चार्ट पारदर्शी है और बार प्रदर्शन पर ही मंडराना

Question

यहाँ मैं क्या कर रहा हूँ का एक उदाहरण है: http://jsfiddle.net/4pb8uzt8/13/

$scope.myJson = { 
    'plot': { 
    'styles': ['#fff', 'red', 'pink'] 
    }, 
    'scale-x': { 
    'values': ['white', 'red', 'pink'] 
    }, 
    'type': 'bar', 
    'series': [{ 
    'text': 'Product History Color', 
    'values': [2, 6, 8] 
    }] 
} 

मैं Zingchart (2.3.0) का उपयोग कर रहा साथ AngularJs (1.4.7) और आयनिक (1.1.0)

अब तक, मेरे ऐप में सभी चार्ट ठीक काम कर रहे हैं। लेकिन जब मैंने बार भरने को अनुकूलित करने की कोशिश की तो मुझे एक अजीब व्यवहार मिला। बार्स अदृश्य हैं, और जब माउस होवर हो जाता है तो बार प्रदर्शित होता है। यह पता लगाने की कोशिश की कि यह कहां से आ रहा था लेकिन कुछ भी अजीब नहीं मिला।

कोई विचार? मैंने JSFiddle में दिखाए गए सटीक उसी जेसन का उपयोग किया, यह सचमुच एक कॉपी-पेस्ट है।

पारदर्शी बार्स

आप समय के लिए धन्यवाद।

अद्यतन

विशेषता fill: url(#...) मेरी AngularJS अनुप्रयोग में मान्यता प्राप्त नहीं है, जैसा कि मैंने एक रूट यूआरएल में नहीं हूँ। उदाहरण एप्लिकेशन/ग्राफ, यह केवल काम करेंगे अगर मैं इस तरह विशेषता में राज्य 'ग्राफ' जोड़ें:

url(graph#...) 

मेरा प्रश्न तो है, वहाँ क्या मैं बिना क्या कोशिश कर रहा हूँ प्राप्त करने के लिए एक रास्ता है ग्रेडियेंट का उपयोग कर?

मैं अपने ऐप के प्रत्येक राज्य के लिए एक टैग जोड़ने से बचना चाहता हूं जो इस मुद्दे को हल करेगा।

Answer 1

जैसा कि जेडबेन ने टिप्पणियों में उल्लेख किया है, ग्रेडिएंट (एसवीजी) सुलभ नहीं है, ज़िंगचर्ट और कोणीय के साथ रूटिंग के साथ एक मुद्दा दिखता है। मुझे यह समस्या देखने के लिए देखा जाएगा कि क्या हम इसके लिए एक प्रस्ताव पा सकते हैं। (मैं ज़िंगचर्ट टीम पर हूं)।

अंतरिम समाधानों के लिए इस बारे में जाने के कुछ तरीके हैं।

1. बदलें प्रकार प्रस्तुत करना

ZingChart डिफ़ॉल्ट रूप से एसवीजी का उपयोग कर चार्ट बना देता है। वैकल्पिक रेंडर 'कैनवास' पर स्विच करके, आप ग्रेडियेंट को अपने कोणीय ऐप में कोई समस्या नहीं दे पाएंगे क्योंकि कैनवास सीधे कैनवास तत्व पर ग्रेडियेंट प्रदान करता है।

बस अपने निर्देश में एक वस्तु प्रस्तुत करना पारित: नियम

इसके बजाय 'शैलियों की संपत्ति जो डिफ़ॉल्ट रूप से ढ़ाल कहते हैं का उपयोग करने का

का उपयोग कर

$scope.myRender = { 
    output :'canvas' 
}; 
<zingchart id="chart-1" zc-render="myRender" zc-values="myValues"></zingchart> 

2. अपने रंग सेट करें, करने के लिए नियमों का उपयोग प्रत्येक श्रृंखला के भीतर विशिष्ट नोड्स को लक्षित करें।

$scope.myJson = { 
    'plot': { 
    'rules': [ 
     {'rule': '%i == 0', 'backgroundColor': 'white'}, 
     {'rule': '%i == 1', 'backgroundColor': 'red'}, 
     {'rule': '%i == 2', 'backgroundColor': 'pink'}, 
    ] 
    }, 
    'scale-x': { 
    'values': ['white', 'red', 'pink'] 
    }, 
    'type': 'bar', 
    'series': [{ 
    'text': 'Product History Color', 
    'values': [2, 6, 8] 
    }] 
} 

http://www.zingchart.com/docs/basic-elements/create-javascript-rules/

इन समाधानों में से किसी भी काम करना चाहिए।