2015-12-28 9 views
5

में ट्रेल्स पाई चार्ट के लिए शीर्षक मेरे पास ट्रेवल स्टाइल पाई चार्ट (एक ही ग्रिड में एकाधिक पाई चार्ट) है, http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart के समान। मैं जिस कोड का उपयोग कर रहा हूं वह उस पृष्ठ पर जो कुछ मिलता है उससे बहुत समान है।ज़िंगचर्ट

मैं प्रत्येक पाई चार्ट पर एक अद्वितीय शीर्षक रखना चाहता हूं। उदाहरण के लिए, यदि वहाँ 4 पाई चार्ट और प्रत्येक पाई वर्ष की एक अलग तिमाही का प्रतिनिधित्व करती है, तो पहला "क्यू 1", दूसरा "क्यू 2," इत्यादि कहता है।

उत्तर

8

ट्रेली शैली पाई चार्ट का उपयोग नहीं कर सकता प्रत्येक पाई के लिए शीर्षक वस्तु।

ए) अपने शीर्षकों के लिए ट्रेल्लिस के साथ बने रहें और व्यक्तिगत रूप से तैनात/स्टाइल लेबल का उपयोग: यहाँ दो विकल्प हैं

labels:[ 
    { 
     text:"Title 1", 
     x: "22%", 
     y: "10%", 
     fontSize: 16 
    }, 
    { 
     text:"Title 2", 
     x: "71%", 
     y: "10%", 
     fontSize: 16 
    }, 
    { 
     text:"Title 3", 
     x: "22%", 
     y:"54%", 
     fontSize: 16 
    }, 
    { 
     text: "Title 4", 
     x: "71%", 
     y:"54%", 
     fontSize: 16 
    } 
    ], 

Full demo of the trellis pie chart with individually styled labels.

बी) इसके बजाय ट्रेल्लिस का उपयोग कर के, 4 के साथ एक graphset का उपयोग वृत्त चित्र। इस तरह आपके पास प्रत्येक पाई के लिए शीर्षक ऑब्जेक्ट तक पहुंच है।

var myConfig = { 
 
    "graphset": [{ 
 
    "type": "pie", 
 
    "title": { 
 
     "text": "Title 1" 
 
    }, 
 
    "series": [{ 
 
     "values": [59] 
 
    }, { 
 
     "values": [55] 
 
    }, { 
 
     "values": [30] 
 
    }, { 
 
     "values": [28] 
 
    }, { 
 
     "values": [15] 
 
    }] 
 
    }, { 
 
    "type": "pie", 
 
    "title": { 
 
     "text": "Title 2" 
 
    }, 
 
    "series": [{ 
 
     "values": [60] 
 
    }, { 
 
     "values": [40] 
 
    }, { 
 
     "values": [35] 
 
    }, { 
 
     "values": [30] 
 
    }, { 
 
     "values": [20] 
 
    }, ] 
 
    }, { 
 
    "type": "pie", 
 
    "title": { 
 
     "text": "Title 3" 
 
    }, 
 
    "series": [{ 
 
     "values": [50] 
 
    }, { 
 
     "values": [40] 
 
    }, { 
 
     "values": [30] 
 
    }, { 
 
     "values": [20] 
 
    }, { 
 
     "values": [10] 
 
    }, ] 
 
    }, { 
 
    "type": "pie", 
 
    "title": { 
 
     "text": "Title 4" 
 
    }, 
 
    "series": [{ 
 
     "values": [40] 
 
    }, { 
 
     "values": [55] 
 
    }, { 
 
     "values": [49] 
 
    }, { 
 
     "values": [40] 
 
    }, { 
 
     "values": [16] 
 
    }, ] 
 
    }] 
 
}; 
 

 

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

टुकड़ा चलाने के ऊपर डेमो देखने के लिए।

मैं जेडसी टीम में हूं। हमलोग यहां सहायता करने के लिए हैं!

+0

इस दृष्टिकोण का उपयोग कर एक अन्य प्रश्न। मैं एक लेबल कैसे जोड़ूं जो पेज पर सभी पाई चार्ट पर लागू होगा, यह देखते हुए कि प्रत्येक पाई चार्ट एक-दूसरे से स्वतंत्र है? –

+0

असल में, मेरे पास एक चीज है जो मैं ग्राफसेट दृष्टिकोण के साथ करने में सक्षम नहीं हूं: (1) एक एकल किंवदंती जोड़ें। मेरे पास ऐसा करने में कामयाब रहा है, लेकिन किंवदंती में वास्तव में मौजूद होने की तुलना में कई और श्रृंखलाएं शामिल हैं। (2) एक ही क्षैतिज अक्ष पर सभी पाई चार्ट कैसे दिखाना है। (3) एक कस्टम प्रारूप के आधार पर प्रत्येक के लिए टूलटिप्स सेट करें। (4) प्रत्येक पाई में कुल राशि के आधार पर प्रत्येक पाई चार्ट के सापेक्ष आकार को सेट करें। आकार-कारक काम नहीं कर रहा है। –

+0

जेडसी टीम के सदस्य यहां - हम आपके प्रश्नों के लिए डेमो पर काम कर रहे हैं। – RockinSocks