ハイチャートで列の幅に問題がある

Question

各シリーズで61のエントリを持つ縦棒グラフ幅の2系列データを作成しました。 デフォルトでは、列の幅は似ているはずですが、矛盾しています。

Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: ["May 12", "Jun 12", "Jul 12", "Aug 12", "Sep 12", "Oct 12", "Nov 12", "Dec 12", "Jan 13", "Feb 13", "Mar 13", "Apr 13", "May 13", "Jun 13", "Jul 13", "Aug 13", "Sep 13", "Oct 13", "Nov 13", "Dec 13", "Jan 14", "Feb 14", "Mar 14", "Apr 14", "May 14", "Jun 14", "Jul 14", "Aug 14", "Sep 14", "Oct 14", "Nov 14", "Dec 14", "Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15", "Jan 16", "Feb 16", "Mar 16", "Apr 16", "May 16", "Jun 16", "Jul 16", "Aug 16", "Sep 16", "Oct 16", "Nov 16", "Dec 16", "Jan 17", "Feb 17", "Mar 17", "Apr 17", "May 17"], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, plotOptions: { column: { pointPadding: 0, borderWidth: 0, groupPadding: 0.08 } }, series: [{"name":"series1","data":[265,244,226,268,259,306,329,378,291,344,263,356,385,228,202,262,331,272,315,249,181,277,292,396,234,181,185,210,202,189,197,233,270,351,378,222,384,450,304,182,180,236,540,173,135,142,207,267,206,261,249,247,161,253,239,221,143,144,187,197,109],"color":"#1f497d"},{"name":"series2","data":[199,203,146,161,134,143,155,184,168,183,149,187,168,162,218,192,144,153,164,150,140,174,195,151,148,112,149,163,141,142,151,163,147,132,240,191,180,159,139,132,157,171,166,185,130,141,304,173,151,134,127,172,147,134,142,161,127,113,150,147,57],"color":"#8eb4e3"}] });。 crisp: falseオプションを使用

http://jsfiddle.net/ynkq44oj/

Answer 1

は、問題を解決しました。しかし、場合によってはチャートがぼやけて見えます。

http://jsfiddle.net/ynkq44oj/1/

Answer 2

falseにseries.crispを設定します。

クリスプ：ブール

真、各列のエッジは、画面上にシャープにするため に最も近いピクセルに丸められます。場合によっては、稠密にパックされた列 が大量にある場合は、列の幅または列間の距離が の目に見える差になります。このような場合、各列がぼやけて表示されても、鮮明度を falseに設定すると、より見栄えが向上する場合があります。 デフォルトはtrueです。

http://api.highcharts.com/highcharts/plotOptions.column.crisp

plotOptions: { 
    column: { 
    pointPadding: 0, 
    borderWidth: 0, 
    groupPadding: 0.08, 
    crisp: false 
    } 
}, 

例：私はそれらを視覚化するために、チャートの異なるタイプを示唆しているデータの量のことでhttp://jsfiddle.net/ynkq44oj/4/