Highcharts 向下钻取饼图
配置
drilldown 配置
drilldown 用于向下钻取数据,通过点击某项深入到其中的具体数据。
drilldown: {
series: drilldownSeries
}
实例
文件名:highcharts_pie_drilldown.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
Highcharts.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: ' ',
parsed: function (columns) {
var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];
// Parse percentage strings
columns[1] = $.map(columns[1], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
$.each(columns[0], function (i, name) {
var brand, version;
if (i > 0) {
// Remove special edition notes
name = name