在折线图中向下钻取函数

我正在尝试使用可以向下钻取几个级别的highcharts生成折线图。海图具有柱状图的这种功能，但我找不到任何线图。如果我试图将图表类型从一列更改为一行，那么我会得到一条不能进一步钻取的图表。有什么方法可以将深入分析功能应用于高层图中的折线图。这是我有的代码：在折线图中向下钻取函数

$(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>

请让我知道如果解决方法是可能的。

来源

2013-02-28 Bhaskar

请大家看看明细行示例：jsfiddle.net/mv9FV/6/

来源

2013-02-28 14:00:25

由于塞巴斯蒂安但这不是我想要的。我想要类似于 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/ 只是线图而不是柱状图，不是简单的切换 – Bhaskar 2013-03-01 08:08:48

http://jsfiddle.net/JPzqn/ – 2013-03-01 10:25:45

这正是我在找的....非常感谢.. :) – Bhaskar 2013-03-01 10:55:01

在折线图中向下钻取函数

回答

相关问题