私は Highcharts を使用していくつかの縦棒 (別名「縦棒グラフ」) を作成しています: highcharts.com/demo/column-basic
チャートに 30 本のバーがある場合もあれば、2 本しかない場合もあります。チャート内の 2 つの非常に幅の広いバーは、非常に奇妙に見えるため、バーの最大幅を設定する決定が下されました。そうすれば、2 つしかない場合、たとえば 50px よりも広くなることはありませんが、50 つある場合、Highcharts は適切と思われる方法でサイズを変更できます。
したがって、私の問題は、Highcharts には列の最大幅を明示的に設定する方法がないことです。誰かがそれに対する解決策を見つけましたか?
明らかに、この質問はこの機能が存在しなかったずっと前に尋ねられましたが、Highcharts 4.1.8 の時点では、次のplotOptions.column.maxPointWidth設定を使用して回避策なしでこれを行うことができます。
$('#container').highcharts({
/* Other chart settings here... */
plotOptions: {
column: {
/* Here is the setting to limit the maximum column width. */
maxPointWidth: 50
}
}
/* Other chart settings here... */
});
以下は、基本的な縦棒グラフの例の JSFiddle で、この動作を示すように変更されています。
この設定のドキュメントはこちら: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth
更新: Highcharts バージョン 4.1.8 の時点で、以下の Adam Goodwin の回答を参照してください。
何年もの間、列の最大幅を設定する唯一の方法は、JavaScript を介して動的に設定することでした。
基本的：
pointWidthます。何かのようなもの：
var chart = new Highcharts.Chart ( { ... ...
//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series = chart.series[0];
if (series.data.length) {
if (series.data[0].barW > MaximumBarWidth) {
series.options.pointWidth = MaximumBarWidth;
/*--- Force a redraw. Note that redraw() will not
fire in this case!
Hence we use something like setSize().
*/
chart.setSize (400, 300);
}
}
究極の解決策は、各ポイント、特に x 位置と幅をラップdrawPointsして上書きすることです。shaperArgs
(function(H) {
var each = H.each;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
each(this.data, function(point) {
point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
point.shapeArgs.width = width;
});
}
proceed.call(this);
})
})(Highcharts)
使用する：
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
ライブデモ: http://jsfiddle.net/83M3T/1/
より良い方法が提案されています
このフィドルをチェックしてください
追加するだけ
series: {
pointWidth: 20
}
あなたはオプションをプロットし、それだけです。:)乾杯を楽しんでください...
function(chart){
var series = chart.series[0];
//--- Enforce a Maximum bar width
if (series && series.data.length) {
if (series.data[0].pointWidth > MaximumBarWidth) {
for(var i=0;i< chart.series.length;i++)
chart.series[i].update({
pointWidth:MaximumBarWidth
});
}
}
}