2017-09-29 26 views
5

मैं कस्टम विज़ुअलाइज़ेशन घटक और हाईचार्ट्स का उपयोग करके जैस्पर्सॉफ्ट स्टूडियो 6.4 में एक रिपोर्ट विकसित कर रहा हूं।हाईचरट्स प्लॉटऑप्शन के साथ जैस्पर रिपोर्ट रंगीन समस्या। टिलकोलर

लंबी कहानी छोटी, जब एक बबल चार्ट या क्षेत्र चार्ट करते समय, plotOptions.fillColor -attribute ठीक से काम नहीं करता है, लेकिन बुलबुले को अंदर या स्टैक्ड एरिया चार्ट के अंदरूनी काला छोड़ देता है। काला रंग आमतौर पर इसका मतलब है कि रंग नहीं मिला है, लेकिन क्षेत्र चार्ट में बबल/रेखाओं की रेखा के रूप में काम करना चाहिए।

define(['jquery_hc','hchart'], function ($, Highcharts) { 
 

 
\t return function (instanceData) { \t 
 

 
\t // Creating the chart 
 
\t var config = { 
 

 
    chart: { 
 
    \t type: 'area', 
 
    \t plotBorderWidth: 1, 
 
     renderTo: instanceData.id, 
 
     width: instanceData.width, 
 
\t \t height: instanceData.height, 
 
\t \t marginBottom: 15, 
 
\t \t marginLeft: 40, 
 
\t \t marginRight: 5, 
 
\t \t marginTop: 5 
 
    }, 
 
    title: { 
 
    \t text: "" 
 
    }, 
 
    colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'], 
 
    xAxis: { 
 
     allowDecimals: false, 
 
     title: {enabled: false}, 
 
     labels: {enabled: false}, 
 
     visible: false 
 
    }, 
 
\t legend: { 
 
\t \t itemStyle: {"fontSize": 6}, 
 
\t \t symbolPadding: 4, 
 
\t \t symbolHeight: 4, 
 
     symbolWidth: 4, 
 
     y: 20 
 
\t }, 
 
     credits: {enabled: false}, 
 
\t yAxis: { 
 
\t \t title: {enabled: false}, 
 
     labels: { 
 
     \t style: {"fontSize": 6}, 
 
     \t formatter: function() { 
 
      \t return this.value; 
 
      \t }, 
 
     }, 
 
     tickInterval: 2 
 
    }, 
 
    plotOptions: { 
 
     area: { 
 
      stacking: 'percent', 
 
     \t animation: false, 
 
     \t marker: { 
 
     \t \t enabled: false 
 
     \t }, 
 
     \t lineWidth: 1 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'that', 
 
     data: [502, 635, 809, 947, 1402, 3634, 5268] 
 
    }, { 
 
     name: 'it', 
 
     data: [106, 107, 111, 133, 221, 767, 1766] 
 
    }, { 
 
     name: 'with', 
 
     data: [163, 203, 276, 408, 547, 729, 628] 
 
    }, { 
 
     name: 'who', 
 
     data: [18, 31, 54, 156, 339, 818, 1201] 
 
    }, { 
 
     name: 'how', 
 
     data: [2, 2, 2, 6, 13, 30, 46] 
 
    }, { 
 
     name: 'this', 
 
     data: [82, 72, 62, 46, 113, 320, 443] 
 
    }, { 
 
     name: 'that', 
 
     data: [11, 12, 14, 16, 13, 55, 113] 
 
    }, { 
 
     name: 'those', 
 
     data: [7, 1, 3, 11, 15, 37, 49] 
 
    }, { 
 
     name: 'these', 
 
     data: [108, 301, 504, 1056, 3039, 8018, 10201] 
 
    }, { 
 
     name: 'this too', 
 
     data: [10, 30, 50, 105, 303, 801, 1020] 
 
    }] 
 
} 
 

 
new Highcharts.Chart(config); 
 
\t 
 
\t } 
 
});

और build.js:

यहाँ निम्नलिखित Highcharts क्षेत्र चार्ट के लिए स्क्रिप्ट है

({ 
 
    baseUrl: '', 
 
    paths: { 
 
     jquery_hc: "../jquery-3.2.1", 
 
     hchart: "../highcharts", 
 
     'areaChart': 'areaChart' 
 
    }, 
 
    shim: { 
 
    \t 'hchart' : { 
 
    \t \t deps: ["jquery_hc"], 
 
    \t \t exports: 'Highcharts' 
 
    \t } 
 
    }, 
 
    name: 'areaChart', 
 
    out: "areaChart.min.js" 
 
})

गु ई हाईचार्ट नवीनतम highchart.js और jquery-3.2.1.js का उपयोग कर रहा है।

  1. चार्ट डाल करने के लिए विषय का उपयोग करते हुए मुख्य रंग
  2. plotOptions.fillColor स्थापना: अशक्त
  3. plotOptions.fillColor स्थापना: '# 927,453'

    कुछ बातें मैं रंग जोड़ने के लिए कोशिश की है

  4. "क्षेत्र" से "श्रृंखला" plotOptions स्थापना
  5. सेटिंग plotOptions.color: [एक ही रंग]

और हाइचार्ट्स से एपीआई संदर्भ के आधार पर शायद कुछ अन्य चीजें।

दूसरी तरफ एक चीज काम कर रही है, अगर मैंने प्लॉटऑप्शन। फिल कॉलर: '#ffffff', सभी परिवर्तनों का रंग, जिसका अर्थ है कि यह मुद्दा ज्यादातर एक रंग प्रति डेटासेट से मेल खाने के बारे में है।

एक बड़ी समस्या यह है कि यह JSFiddle (JSFiddle) में पुन: उत्पन्न नहीं होता है।

तो, जैस्पर रिपोर्ट संभवतः दोषी है, लेकिन मैं विचारों से बाहर होना शुरू कर रहा हूं। मुझे एक मुद्दा मिला है, जो इससे संबंधित हो सकता है: (https: //
community.jaspersoft.com/jaspersoft-studio/issues/8641), लेकिन मैं इसके बारे में बहुत कुछ करने में सक्षम नहीं हूं सेट अप। मेरा वेब एप्लिकेशन रिपोर्ट बनाने के लिए जैस्पर इंजन का उपयोग कर रहा है और समस्या भी मौजूद है।

स्टैक्स ओवरफ्लो के लोग, हाईचार्ट्स और जैस्पर्सॉफ्ट के कर्मचारियों के कर्मचारी, आपके ज्ञान को जोड़ते हैं और इस मुद्दे को हल करने में मेरी सहायता करते हैं!

अन्त में, जनरेट किए गए रिपोर्ट के जैस्पर रिपोर्ट स्टूडियो की एक तस्वीर: Pic to display the issue

उत्तर

4

कोड करने के लिए देख बाद, मैंने पाया रिपोर्ट ठीक से काम कर रहा है जब हम HTML स्वरूप में इसे देख लेकिन पीडीएफ प्रारूप ठीक से काम नहीं कर रहा है। जैसा कि हम सीवीसी घटक रिपोर्ट डाउनलोड करने के लिए phantmjs का उपयोग करते हैं, तो मैंने phantomjs और highcharts से संबंधित समस्या को खोजने की कोशिश की लेकिन कुछ भी खोजने में असमर्थ।

फिर मैंने प्लॉटऑप्शन प्रॉपर्टी की कोशिश की और आपके कोड में निम्नलिखित प्लॉटऑप्शन जोड़ा।

plotOptions: { 
    series: { 
     animation: false, 
     stacking: 'percent', 
     lineWidth: 1, 
     fillColor: null, 
     fillOpacity: 1, // this is default to 0.75 
     marker: { 
      enabled: false 
     } 
    } 
}, 

फिर यह परिणाम पीडीएफ प्रारूप में भी दिखाना शुरू कर देता है। तो मुख्य अपराधी fillOpacity है यदि आप इसे 1 पर सेट करते हैं तो आपकी समस्या हल हो जाएगी।

नोट: यदि आप 1 से अधिक fillOpacity का उपयोग करते हैं तो यह परिणाम नहीं दिखा रहा है।
enter image description here

आप नीचे दिखाए गए रंग, fillcolor और अस्पष्टता भी निर्दिष्ट कर सकते हैं।

series: [{ 
     name: 'that', 
     data: [502, 635, 809, 947, 1402, 3634, 5268], 
     fillColor:'red', // use this color light as compared to color 
     fillOpacity: 1, 
     color: 'white' // use this color dark as compared to fillcolor 
    }, 
    ... 
    ... 
    ... 
    ,{ 
     name: 'this too', 
     data: [10, 30, 50, 105, 303, 801, 1020], 
     fillColor:'#00ff00', 
     fillOpacity: 1, 
     color: 'orange' 
    }] 

आप here.

+0

से कोड डाउनलोड कर सकते हैं धन्यवाद! यह मेरी समस्या हल हो गई। उन चीजों में से एक जो आप अभी नहीं देखते हैं, लेकिन खुशी से कोई कर सकता है! धन्यवाद। –

+0

मई मुझे पता है कि मैं किस तरह की चीजें देखने में असमर्थ हूं? –

+0

मेरा मतलब लाक्षणिक बोलने में था कि मैं fillOpacity चर नहीं देख सकता, लेकिन आप, फहाद अंजुम, कर सकते हैं ...;) –

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