Highcharts固定レイアウト棒グラフ
次の例では、固定レイアウトの棒グラフを示しています。
前の節では、すでにHighcharts基本的な設定構文を知っています。 それでは、他の構成を見てみましょう。 シリーズpointPlacementとpointPadding構成に追加します。
series.pointPadding
反対側の一方highchartsチャートの幅が固定されている各列の値との間の距離、列の小さい方、大きい値の幅を制御します。 デフォルト値は0.1です
series.pointPlacement
pointPlacementが「オン」に設定し、カラムチャート、ノー区間軸点Xで。 pointPlacementはスケールのレイアウトによって列の間に、「間」に設定した場合。
3.0.2バージョンHighcharts後、pointPlacementはデジタル、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 教程 | 本教程(w3big.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: '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>
上の例の出力は、次のとおりです。