Drilling down the chart_Highcharts Essentials-QQ阅读男频科幻网

上QQ阅读APP看书，第一时间看更新

Drilling down the chart

Consider the following table showing the retail revenue breakdown by month for the US video game industry starting from March 2012 to February 2014:

This table shows the revenue (in billions of US dollars) for the video game retail industry. In this example, we will plot a chart to visualize this data. We will draw a column chart that shows the total revenue for the fiscal year starting from March 2012 to February 2014. On clicking on the column, the reader will be shown a more detailed column chart showing the breakdown by months for the respective year.

Note

To use the drilldown feature, you need to include the Highcharts-4.x.x/js/modules/drilldown.js file in your HTML after the Highcharts.js file. Not doing so will not throw any error or warning, but the drilldown feature will not work, hence making debugging difficult.

To start creating the drilldown chart for the table data, perform the following steps:

Create a new blank HTML file and paste in the following code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Highcharts Essentials</title>
</head>
<body>
  
  <div id="revenue_chart" style="width: 600px; height: 450px;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/drilldown.js"></script>
</body>
</html>

Let's first draw a column chart to display the total yearly revenue:

(function() {
  $( '#revenue_chart' ).highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Retail Revenue for Video Game Industry'
    },
    subtitle: {
      text: 'Source: NPD Group; AFJV'
    },
    xAxis: {
      title: {
        text: 'Years'
      },
      Type: 'category'
    },
    yAxis: {
      title: {
        text: 'Revenue (in U.S. billion dollars)'
      }
    },
    series: [{
      data: [{
        name: '2012 - 2013',
        y: 13.04
      }, {
        name: '2013 - 2014',
        y: 12.87
      }]
    }]
  });
})();

In the preceding code, we passed the data series for each category as a distinct data object that includes the name of the data series and its value on the y axis. The preceding code will produce the following chart:

To enable the drilldown feature, we will specify the IDs of the drilldown series to be used for both categories (years) and then pass those series as a data object in the drilldown component:

Modify your series component to reference the IDs of the drilldowns to be used as follows:

series: [{
  data: [{
    name: '2012 - 2013',
    y: 13.04,
    drilldown: 'rev1213'
  }, {
    name: '2013 - 2014',
    y: 12.87,
    drilldown: 'rev1314'
  }]
}]

Now, include in your code the drilldown component:

drilldown: {
  series: [{
    name: 'Revenue',
    id: 'rev1213',
    data: [
      ['Mar', 1.1], ['Apr', 0.63], ['May', 0.52], ['Jun', 0.7], ['Jul', 0.55], ['Aug', 0.52], ['Sep', 0.85], ['Oct', 0.76], ['Nov', 2.55], ['Dec', 3.21], ['Jan', 0.84], ['Feb', 0.81]
    ]
  }, {
    name: 'Revenue',
    id: 'rev1314',
    data: [
      ['Mar', 0.99], ['Apr', 0.5], ['May', 0.39], ['Jun', 0.59], ['Jul', 0.44], ['Aug', 0.52], ['Sep', 1.08], ['Oct', 0.79], ['Nov', 2.74], ['Dec', 3.28], ['Jan', 0.66], ['Feb', 0.89]
    ]
  }]
}

Notice the id properties of the drilldown series that are the same as used to reference in the drilldown parent point.

Now, click on any of the columns and you will be taken to another chart showing the revenue breakdown, as shown in the following screenshot:

Notice the Back to Revenue button that shows up after drilling down into the child chart.SW

Note

You can find out more about the Highcharts drilldown feature by visiting the official documentation at http://api.highcharts.com/highcharts#drilldown.

本周热推：

Python编程：从入门到实践 Java从初学到精通深度学习入门：基于Python的理论与实现 Python编程：从入门到实践（第2版）C语言从入门到精通（第6版）