固定位置的柱形图
以下是固定位置的柱状图示例。
我们已经在Highcharts 配置语法一章中看到了用于绘制图表的配置。现在让我们看看其他配置以及我们如何在系列下添加
pointPlacement 和
pointPadding。
下面给出了一个固定位置的柱状图示例。
series.pointPadding
每列或条之间的填充，以 x 轴为单位；默认为 0.1、
series.pointPlacement
在柱形图中，当 pointPlacement 为"on"时，该点不会创建 X 轴的任何填充。在极柱图中，这意味着第一列直接指向北方。如果 pointPlacement 为"之间"，则列将在刻度之间布置。这对于可视化两个时间点之间或极坐标图某个扇区中的数量非常有用。
从 Highcharts 3.0.2 开始，点位置也可以是数字，其中 0 位于轴值上，-0.5 位于此值与前一个值之间，0.5 位于此值与下一个值之间。与文本选项不同，数字点放置选项不会影响轴填充。
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement:-0.2
}
示例
highcharts_column_fixed.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>
</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: 'Efficiency Optimization by Branch'
};
var xAxis = {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
};
var yAxis = [
{
min: 0,
title: {
text: 'Employees'
}
},
{
title: {
text: 'Profit (millions)'
},
opposite: true
}
];
var legend = {
shadow: false
};
var tooltip = {
shared: true
};
var credits = {
enabled: false
};
var plotOptions = {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
};
var series = [
{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
},
{
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
},
{
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: ',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
},
{
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: ',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}
];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.credits = credits;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
