हाइचेर्ट्स चेंज बार कलर

Question

पर आधारित है। मैं हाईचार्ट्स का उपयोग कर रहा हूं और सोच रहा था कि बार चार्ट में शीर्ष 3 परिणाम होने के बाद एक अलग रंग बार होने के बाद शेष चार्ट हो सकता है? मैं एक सीएसवी फ़ाइल से चार्ट populating हूँ।

$(document).ready(function() { 

     var options = { 
      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'bar' 
      }, 
      title: { 
       text: 'Spiritual Gifts Results' 
      }, 
      colors: [ 
       '#3BBEE3' 
      ], 
      xAxis: { 
       categories: [] 
      }, 

      yAxis: { 
       title: { 
        text: 'Service' 
       } 
      }, 
      series: [] 
     }; 

     var data = document.getElementById("<%= hdn_Data.ClientID %>"); 
     // Split the lines 
     if (data.value != "") { 
      var lines = data.value.split('\n'); 

      // Iterate over the lines and add categories or series 
      $.each(lines, function(lineNo, line) { 
       var items = line.split(','); 
       // header line containes categories 
       if (lineNo == 0) { 
        $.each(items, function(itemNo, item) { 
         if (itemNo > 0) options.xAxis.categories.push(item); 
        }); 
       } 
       // the rest of the lines contain data with their name in the first position 
       else { 
        var series = { 
         data: [] 
        }; 
        $.each(items, function(itemNo, item) { 
         if (itemNo == 0) { 
          series.name = item; 
         } else { 
          series.data.push(parseFloat(item)); 
         } 
        }); 

        options.series.push(series); 

       } 

      }); 

      // Create the chart 
      var chart1 = new Highcharts.Chart(options); 
     } 
    }); 

यहाँ एक नमूना CSV है:

Categories,Administration,Evangelism,Mercy,Shepherding,Leadership,Wisdom,Teaching 
Total Points,11,5,4,4,3,2,1 

इस उदाहरण मैं 'प्रशासन' के लिए चाहते हैं, उसमें

तो, 'इंजीलवाद', और 'दया'

यहाँ मेरी जावास्क्रिप्ट है 'शेफर्डिंग', 'लीडरशिप' इत्यादि के दौरान 'ब्लू बार रंग' रखने के लिए 'लाल बार रंग' होता है।

क्या यह संभव है?

यहाँ fiddle

Answer 1

ओपी की टिप्पणी के आधार पर, मेरे पिछले उत्तर को दबा दिया।

आप कर रहे हैं के रूप में,

series.name = item; 

और

series.data.push(parseFloat(item)); 

बुद्धिमान की तरह, आप कर सकते हैं,

series.color: '#f6f6f6' 

(अपने पाश में आप रंग बदल सकते हैं के आधार पर अपने परिस्थितियों)

आप क्या कर सकते हैं,

$(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'bar' 
     }, 
     title: { 
      text: 'Spiritual Gifts Results' 
     }, 
     colors: [ 
      '#3BBEE3' 
      ], 
     xAxis: { 
      categories: [] 
     }, 

     yAxis: { 
      title: { 
       text: 'Service' 
      } 
     }, 
     series: [] 
    }; 

    var data = document.getElementById("hdn_Data"); 
    // Split the lines 
    if (data.value != "") { 
     var lines = data.value.split('\n'); 

     // Iterate over the lines and add categories or series 
     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      // header line containes categories 
      if (lineNo == 0) { 
       $.each(items, function(itemNo, item) { 
        if (itemNo > 0) options.xAxis.categories.push(item); 
       }); 
      } 
      // the rest of the lines contain data with their name in the first position 
      else { 
       var series = { 
        data: [] 
       }; 
       $.each(items, function(itemNo, item) { 
        var data = {}; 
        if (itemNo == 0) { 
         series.name = item; 
        } else { 
         data.y = parseFloat(item); 
         if (itemNo <= 3) { 
          data.color = 'Gray'; 
         } 
         else { 
          data.color = '#3BBEE3'; 
         } 
         series.data.push(data); 
        } 
       }); 
       options.series.push(series); 
       } 
      }); 

      // Create the chart 
      var chart1 = new Highcharts.Chart(options); 
     } 
    }); 

Fiddle

देखें this, तो आप 3 तरीकों से data दे सकते हैं। मैंने तीसरा इस्तेमाल किया है।

Answer 2

हाँ, अपने पुश निष्पादन आप उस बिंदु के लिए रंग सेट करने के लिए सक्षम होना चाहिए में है। मैं पुश से बहुत परिचित नहीं हूं क्योंकि हम एक प्रीकंपील्ड डेटा ऑब्जेक्ट का उपयोग करते हैं जिसे हम भेजते हैं। लेकिन हमारे .NET के अंदर हमने एक विशेष बिंदु पर रंग (यदि आवश्यक हो) सेट किया है और फिर डेटा ऑब्जेक्ट को चार्ट पर भेज दिया है।

Answer 3

यहाँ एक उदाहरण

data: [ 
    { y: 34.4, color: 'red'}, // this point is red 
    21.8,      // default blue 
    {y: 20.1, color: '#aaff99'}, // this will be greenish 
    20       // default blue 
]