javascript - Highcharts 中列宽不一致的问题

Question

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

Highcharts.chart('容器', { 图表: { 类型:'列' }, 标题: { 文本:“月平均降雨量” }, 副标题:{ 文本:“来源:WorldClimate.com” }, x轴:{ 类别:[“5 月 12 日”、“6 月 12 日”、“7 月 12 日”、“8 月 12 日”、“9 月 12 日”、“10 月 12 日”、“11 月 12 日”、“12 月 12 日”、“1 月 13 日”、“2 月13 日”、“3 月 13 日”、“4 月 13 日”、“5 月 13 日”、“6 月 13 日”、“7 月 13 日”、“8 月 13 日”、“9 月 13 日”、“10 月 13 日”、“11 月 13 日”、“12 月13 日”、“1 月 14 日”、“2 月 14 日”、“3 月 14 日”、“4 月 14 日”、“5 月 14 日”、“6 月 14 日”、“7 月 14 日”、“8 月 14 日”、“9 月 14 日”、“10 月14"、"11 月 14 日"、"12 月 14 日"、"1 月 15 日"、"2 月 15 日"、"3 月 15 日"、"4 月 15 日"、"5 月 15 日"、"6 月 15 日"、"7 月 15 日"、"8 月15"、"9 月 15 日"、"10 月 15 日"、"11 月 15 日"、"12 月 15 日"、"1 月 16 日"、"2 月 16 日"、"3 月 16 日"、"4 月 16 日"、"5 月 16 日"、"6 月16 日”、“7 月 16 日”、“8 月 16 日”、“9 月 16 日”、“10 月 16 日”、“11 月 16 日”、“12 月 16 日”、“1 月 17 日”、“2 月 17 日”、“3 月 17 日”、“4 月17", "5 月 17 日"], 十字线:真实 }, y 轴:{ 分钟:0， 标题: { 文本:“降雨量(毫米)” } }, 绘图选项:{ 柱子: { 点填充:0， 边框宽度:0， 组内边距:0.08 } }, 系列:[{“名称”:“系列1”，“数据”:[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,14 3,144,187,197,109],"颜色":"#1f497d"},{"名称":"系列2","数据":[199,203,146,161,134,143,155,184,168,183,149,187,168,162,218,192,144,153,1 64,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],"颜色":"#8eb4e3"}] });.

http://jsfiddle.net/ynkq44oj/

Answer 1

设置series.crisp为假。

crisp: Boolean

When true, each column edge is rounded to its nearest pixel in order to render sharp on screen. In some cases, when there are a lot of densely packed columns, this leads to visible difference in column widths or distance between columns. In these cases, setting crisp to false may look better, even though each column is rendered blurry. Defaults to 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/