Highstock columnrange 数据分组值不一致
Highstock columnrange data grouping values not consistent
启用了 dataGrouping 的 highstock 列范围似乎无法正确计算 dataAggregation。
聚合值似乎在更改范围时发生了变化。
如果向右滚动更多,2014 年 3 月将显示不同的值。
代码和 jsfiddle:
dataGrouping: {
enabled: true,
approximation: function() {
const indices = _.range(this.dataGroupInfo.start, this.dataGroupInfo.start + this.dataGroupInfo.length);
const low = _.min(indices.map(i => this.options.data[i][1]));
const high = _.max(indices.map(i => this.options.data[i][2]));
return [low, high];
},
groupPixelWidth: 50
}
仅当导航器不是从开头开始时,列才会更改 - 发生这种情况是因为您定义近似回调的方式。
dataGroupInfo
包含图表中可见点(属于 x 轴范围,裁剪点)的信息,而不是所有点 - 因此要为初始数据提供适当的索引,您需要添加 this.cropStart
- 这是点可见的索引。
approximation: function() {
const start = this.cropStart + this.dataGroupInfo.start;
const stop = start + this.dataGroupInfo.length;
const indices = _.range(start, stop);
const low = _.min(indices.map(i => this.options.data[i][1]));
const high = _.max(indices.map(i => this.options.data[i][2]));
return [ low, high ];
},
示例:https://jsfiddle.net/12o4e84v/7/
可以更轻松地实现相同的功能
approximation: function(low, high) {
return [ _.min(low), _.max(high) ];
}
示例:https://jsfiddle.net/12o4e84v/8/
或者更简单:
approximation: 'range',
但是,默认情况下,列的近似值设置为 range
,因此您不必手动执行此操作。
启用了 dataGrouping 的 highstock 列范围似乎无法正确计算 dataAggregation。
聚合值似乎在更改范围时发生了变化。
如果向右滚动更多,2014 年 3 月将显示不同的值。
代码和 jsfiddle:
dataGrouping: {
enabled: true,
approximation: function() {
const indices = _.range(this.dataGroupInfo.start, this.dataGroupInfo.start + this.dataGroupInfo.length);
const low = _.min(indices.map(i => this.options.data[i][1]));
const high = _.max(indices.map(i => this.options.data[i][2]));
return [low, high];
},
groupPixelWidth: 50
}
仅当导航器不是从开头开始时,列才会更改 - 发生这种情况是因为您定义近似回调的方式。
dataGroupInfo
包含图表中可见点(属于 x 轴范围,裁剪点)的信息,而不是所有点 - 因此要为初始数据提供适当的索引,您需要添加 this.cropStart
- 这是点可见的索引。
approximation: function() {
const start = this.cropStart + this.dataGroupInfo.start;
const stop = start + this.dataGroupInfo.length;
const indices = _.range(start, stop);
const low = _.min(indices.map(i => this.options.data[i][1]));
const high = _.max(indices.map(i => this.options.data[i][2]));
return [ low, high ];
},
示例:https://jsfiddle.net/12o4e84v/7/
可以更轻松地实现相同的功能
approximation: function(low, high) {
return [ _.min(low), _.max(high) ];
}
示例:https://jsfiddle.net/12o4e84v/8/
或者更简单:
approximation: 'range',
但是,默认情况下,列的近似值设置为 range
,因此您不必手动执行此操作。