我在 Highcharts 中有一个我无法弄清楚的烦人的东西。我有动态生成的图形，可以包含多个列和样条。在示例中，样条是温度测量值，包含大量数据点。这两列按天分组，因此每天仅包含一个值。
当我使用这种组合时，列宽几乎不可见:
http://jsfiddle.net/FXRj2/
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],
[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],
[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],
[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2],
[1374116400000,20.8],[1374120000000,20.5],[1374123600000,20],
[1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9],
[1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4],
[1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1],
[1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7],
[1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1],
[1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4],
[1374192000000,21],[1374195600000,20.4],[1374199200000,20.1],
[1374202800000,19.7],[1374206400000,19.3],[1374210000000,19],
[1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3],
[1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4],
[1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2],
[1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5],
[1374256800000,23.1],[1374260400000,23],[1374264000000,22.4],
[1374267600000,22],[1374271200000,21.4],[1374274800000,21.2],
[1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3],
[1374289200000,20.2],[1374292800000,20],[1374296400000,19.7],
[1374300000000,19.3],[1374303600000,19],[1374307200000,18.9],
[1374310800000,19],[1374314400000,19.2],[1374318000000,19],
[1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2],
[1374332400000,20.6],[1374336000000,21],[1374339600000,21.6],
[1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3],
[1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1],
[1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7],
[1374375600000,19.4],[1374379200000,19],[1374382800000,18.6],
[1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6],
[1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6],
[1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4],
[1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8],
[1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4],
[1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2],
[1374451200000,25.7],[1374454800000,25],[1374458400000,24.3],
[1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5],
[1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5],
[1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9],
[1374494400000,26.1],[1374498000000,27],[1374501600000,27.8],
[1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1],
[1374516000000,29.2],[1374519600000,29],[1374523200000,28.7],
[1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3],
[1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9],
[1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1],
[1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8],
[1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5],
[1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3],
[1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9],
[1374602400000,29],[1374606000000,29.4],[1374609600000,29.1],
[1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6],
[1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6],
[1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3],
[1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5],
[1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4],
[1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9],
[1374678000000,26.3]],
tooltip: {
valueSuffix: '°C'
}
}]
当我删除温度数据时，列“重新获取”它们的正常宽度行为:
http://jsfiddle.net/K9DxS/
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],
[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],
[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],
[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [],
tooltip: {
valueSuffix: '°C'
}
}]
我一直在寻找使用 pointWidth 动态控制列宽的方法，但这让我陷入了一个新的问题领域，因为我并不总是确定是否有列和样条的组合以及日期范围是什么。
有没有解决这个问题的技巧？我希望我错过了一些简单的东西。
PS:帖子有点长，但 StackOverflow 坚持我用我的 jsfiddle 链接插入了代码......
最佳答案
我无法忍受这些事情......它已经困扰了我几个星期，今天我决定发布到 stackoverflow。为了进一步帮助我的案例，当我注意到有多个 x 轴的选项时，我正在阅读 Highcharts 的 API 描述。由于我的问题似乎与 x 轴上的缩放有关，我决定试一试......
我为线数据创建了一个新的 x 轴，它的作用就像一个魅力。当然，我们不想看到多个 x 轴，所以稍微摆弄一下设置就会再次隐藏它。
我的 x 轴定义现在看起来像这样:
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
opposite: true,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}],
在“太多”点的数据系列上，我简单地添加了“xAxis:1”。
在这里 fiddle :http://jsfiddle.net/AM4vx/
关于highcharts - 与样条曲线结合使用时，Highcharts 中的列宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17836838/