高图

时间:2017-05-16 07:45:26

标签: javascript highcharts

我创建了一个柱形图宽2系列数据,每个系列有61个条目。 默认情况下,列宽应该相似但不一致。

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"}] });

http://jsfiddle.net/ynkq44oj/

2 个答案:

答案 0 :(得分:1)

series.crisp设为false。

  

crisp:Boolean

     

如果为true,则每个列边缘按顺序舍入到其最近的像素   在屏幕上呈现清晰。在某些情况下,当有很多   密集填充的色谱柱,这会导致色谱柱明显不同   列之间的宽度或距离。在这些情况下,设置清脆   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/

答案 1 :(得分:0)

使用 crisp: false选项解决了这个问题。但在某些情况下,图表看起来很模糊。

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