Highcharts stacked column chart using percentages
The following example demonstrates a stacked column chart using percentages.
In the previous chapters, we have learned the basic configuration syntax of Highcharts. Next, let's look at other configurations. Add the stacking property in plotOptions:
Configuration
plotOptions: data point options
plotOptions is used to set properties related to data points in the chart. The property settings of plotOptions vary slightly depending on the chart type.
Configure the chart stacking setting plotOptions.area.stacking to "percent". If stacking is disabled, use null.
var plotOptions = {
column: {
stacking: 'percent'
}
};
Example
File name: highcharts_column_percentage.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: '堆叠柱形图'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
min: 0,
title: {
text: '水果总消费量'
}
};
var tooltip = {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
};
var plotOptions = {
column: {
stacking: 'percent'
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The output result of the above example is:
other extensions