Gráfico de columnas con capacidad de desglose
A continuación se muestra un ejemplo de un gráfico de columnas con capacidad de desglose.
Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veremos un ejemplo de un gráfico de columnas con capacidad de desglose.
Configuraciones
Analicemos ahora configuraciones adicionales y también cómo hemos agregado una serie en el desglose.
profundizar
Opciones para profundizar, el concepto de inspeccionar datos de cada vez más alta resolución haciendo clic en elementos del gráfico como columnas o sectores circulares.
drilldown: {
series: drilldownSeries
}Ejemplo
highcharts_column_drilldown.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/modules/drilldown.js"></script>
<script src = "https://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: '\t',
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.split(' -')[0];
// Split into brand and version
version = name.match(/([0-9]+[\.0-9x]*)/);
if (version) {
version = version[0];
}
brand = name.replace(version, '');
// Create the main data
if (!brands[brand]) {
brands[brand] = columns[1][i];
} else {
brands[brand] += columns[1][i];
}
// Create the version data
if (version !== null) {
if (!versions[brand]) {
versions[brand] = [];
}
versions[brand].push(['v' + version, columns[1][i]]);
}
}
});
$.each(brands, function (name, y) {
brandsData.push({
name: name,
y: y,
drilldown: versions[name] ? name : null
});
});
$.each(versions, function (key, value) {
drilldownSeries.push({
name: key,
id: key,
data: value
});
});
var chart = {
type: 'column'
};
var title = {
text: 'Browser market shares. November, 2013'
};
var subtitle = {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
};
var xAxis = {
type: 'category'
};
var yAxis = {
title: {
text: 'Total percent market share'
}
};
var tooltip = {
headerFormat: '<span style = "font-size:11px">{series.name}</span><br>',
pointFormat: '<span style = "color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total'
};
var credits = {
enabled: false
};
var series = [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}];
var drilldown = {
series: drilldownSeries
}
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.credits = credits;
json.series = series;
json.drilldown = drilldown;
$('#container').highcharts(json);
}
});
});
</script>
<!-- Data from www.netmarketshare.com. Select Browsers =>
Desktop share by version. Download as tsv. -->
<pre id = "tsv" style = "display:none">
Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%
</pre>
</body>
</html>Resultado
Verifique el resultado.