लाइन चार्ट

Question

के मामले में हाईचार्ट्स में फ़ंक्शन को ड्रिल करें, मैं उच्च स्तरों का उपयोग करके एक लाइन चार्ट उत्पन्न करने की कोशिश कर रहा हूं जिसे कुछ स्तरों पर ड्रिल किया जा सकता है। हाइचार्ट में कॉलम चार्ट के लिए यह कार्यक्षमता है लेकिन मुझे लाइन चार्ट के लिए कुछ भी नहीं मिला। यदि मैं चार्ट प्रकार को कॉलम से लाइन में बदलने का प्रयास करता हूं तो मुझे चार्ट के रूप में थोड़ी देर रेखा मिलती है जिसे आगे ड्रिल नहीं किया जा सकता है। क्या कोई तरीका है कि मैं हाईचार्ट्स में लाइन चार्ट में ड्रिल डाउन कार्यक्षमता लागू कर सकता हूं। यह वह कोड है जो मेरे पास है:

$(function() { 
var chart; 
$(document).ready(function() { 

    var colors = Highcharts.getOptions().colors, 
     categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], 
     name = 'Browser brands', 
     data = [{ 
       y: 55.11, 
       color: colors[0], 
       drilldown: { 
        name: 'MSIE versions', 
        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], 
        data: [10.85, 7.35, 33.06, 2.81], 
        color: colors[0] 
       } 
      }, { 
       y: 21.63, 
       color: colors[1], 
       drilldown: { 
        name: 'Firefox versions', 
        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
        data: [0.20, 0.83, 1.58, 13.12, 5.43], 
        color: colors[1] 
       } 
      }, { 
       y: 11.94, 
       color: colors[2], 
       drilldown: { 
        name: 'Chrome versions', 
        categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 
         'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], 
        data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], 
        color: colors[2] 
       } 
      }, { 
       y: 7.15, 
       color: colors[3], 
       drilldown: { 
        name: 'Safari versions', 
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
         'Safari 3.1', 'Safari 4.1'], 
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], 
        color: colors[3] 
       } 
      }, { 
       y: 2.14, 
       color: colors[4], 
       drilldown: { 
        name: 'Opera versions', 
        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], 
        data: [ 0.12, 0.37, 1.65], 
        color: colors[4] 
       } 
      }]; 

    function setChart(name, categories, data, color) { 
     chart.xAxis[0].setCategories(categories, false); 
     chart.series[0].remove(false); 
     chart.addSeries({ 
      name: name, 
      data: data, 
      color: color || 'white' 
     }, false); 
     chart.redraw(); 
    } 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
     }, 
     title: { 
      text: 'Browser market share, April, 2011' 
     }, 
     subtitle: { 
      text: 'Click the columns to view versions. Click again to view brands.' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      column: { 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          var drilldown = this.drilldown; 
          if (drilldown) { // drill down 
           setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); 
          } else { // restore 
           setChart(name, categories, data); 
          } 
         } 
        } 
       }, 
       dataLabels: { 
        enabled: true, 
        color: colors[0], 
        style: { 
         fontWeight: 'bold' 
        }, 
        formatter: function() { 
         return this.y +'%'; 
        } 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       var point = this.point, 
        s = this.x +':<b>'+ this.y +'% market share</b><br/>'; 
       if (point.drilldown) { 
        s += 'Click to view '+ point.category +' versions'; 
       } else { 
        s += 'Click to return to browser brands'; 
       } 
       return s; 
      } 
     }, 
     series: [{ 
      name: name, 
      data: data, 
      color: 'white' 
     }], 
     exporting: { 
      enabled: false 
     } 
    }); 
}); 

}); 
    </script> 
</head> 
<body> 

अगर कोई कामकाज संभव है तो कृपया मुझे बताएं।

Answer 1

कृपया ड्रिलडाउन लाइन उदाहरण पर नज़र रखना: jsfiddle.net/mv9FV/6/