2011-04-20 25 views
46

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

जॉन श्रृंखला: नीले धराशायी लाइन मैरी श्रृंखला: ठोस रेड लाइन

किसी को भी यह कैसे पूरा करने के लिए पता है?

उत्तर

96

विकल्प प्रत्येक श्रृंखला के लिए अलग से सेट किए जा सकते हैं।

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 

    series: [{ 
     name: 'John', 
     color: '#0066FF', 
     dashStyle: 'ShortDash', 
     data: [ 
      [Date.UTC(2010, 0, 1), 29.9], 
      [Date.UTC(2010, 2, 1), 71.5], 
      [Date.UTC(2010, 3, 1), 106.4] 
     ] 
    },{ 
     name: 'Mary', 
     color: '#FF0000', 
     data: [ 
      [Date.UTC(2010, 0, 1), 60.9], 
      [Date.UTC(2010, 1, 1), 40.5], 
      [Date.UTC(2010, 2, 1), 90.0], 
      [Date.UTC(2010, 3, 1), 80.4] 
     ] 
    }] 
}); 

JsFiddle Example

+0

इस के लिए धन्यवाद! संदर्भ दस्तावेज़ों ने ऐसा प्रतीत किया है कि आप केवल सभी श्रृंखलाओं के लिए विकल्प सेट कर सकते हैं। मैंने सोचा कि जब मैंने देखा तो यह अजीब था, लेकिन यह स्पष्ट करता है। –

+1

क्या आप उस रंग को सशर्त बना सकते हैं? आश्चर्य है कि क्या आप एक फॉर्मेटर के माध्यम से रंग प्राप्त कर सकते हैं। – tsquillario

+0

बहुत बढ़िया @EricC! .. मेरा दिन बचाया .. –

8

आप api here पढ़ा, तो आप निम्न पाठ देखेंगे।

सेरी

वास्तविक श्रृंखला चार्ट में जोड़ने के लिए। नीचे सूचीबद्ध सदस्यों के अलावा, उस विशिष्ट प्रकार की साजिश के लिए plotOptions के किसी भी सदस्य को अलग-अलग श्रृंखला में जोड़ा जा सकता है। उदाहरण के लिए, भले ही एक सामान्य lineWidthplotOptions.series में निर्दिष्ट है, प्रत्येक व्यक्ति के लिए एक व्यक्ति lineWidth निर्दिष्ट किया जा सकता है।

तो आप plotOptions से कुछ भी जोड़ सकते हैं।

डेमो:

series: [{ 
    name: 'serie1', 
    data: [0,1,2,3,4,5,6,7,8,9], 
    color: '#FFFF00', 
    lineWidth: 4, 
    id: 'serie1', 
    step: true 
}] 

Working demo

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