在 highcharts 中计算最小 y 轴值
Posted
技术标签:
【中文标题】在 highcharts 中计算最小 y 轴值【英文标题】:Calculating a min y axis value in highcharts 【发布时间】:2012-04-19 06:16:29 【问题描述】:如果我创建的柱形图的值 > 0 但彼此之间的值比它们更接近 0,那么生成的图表将具有看起来几乎相同的列。请参阅此jsFiddle。
但是,如果我将图表类型更改为线条,则生成的图表会更好,因为 min yAxis 值被计算为非零值,因此图表上的值分布更加明显。
我可以手动设置一个最小 yAxis 值,但我需要它来处理任何数据集,因此需要计算它。我怎样才能为柱形图实现同样的效果?
【问题讨论】:
【参考方案1】:我发现 Highcharts 在哪里计算折线图的最小值(至少对于线性轴)。它在 getTickPositions() 函数中。具体是这几行代码:
// pad the values to get clear of the chart's edges
if (!categories && !usePercentage && !isLinked && defined(min) && defined(max))
length = (max - min) || 1;
if (!defined(options.min) && !defined(userMin) && minPadding && (dataMin < 0 || !ignoreMinPadding))
min -= length * minPadding;
if (!defined(options.max) && !defined(userMax) && maxPadding && (dataMax > 0 || !ignoreMaxPadding))
max += length * maxPadding;
所以它计算最小值为
length = ([max data value] - [min data value]) || 1
min = [min data value] - length * minPadding
yAxis 上 minPadding 的默认值为 0.05 所以
394.5 = 395 - ((405 - 395) * 0.05)
创建刻度位置时对 394.5 进行四舍五入,因此最终结果为 390。
到目前为止,我想出的是this。 (yAxis 上的 minPadding 默认值似乎没有暴露,所以我已经对其进行了硬编码)
var data = [400,405,395];
Array.max = function( array )
return Math.max.apply( Math, array );
;
Array.min = function( array )
return Math.min.apply( Math, array );
;
var min = Array.min(data);
var max = Array.max(data);
var chart = new Highcharts.Chart(
chart:
renderTo: 'container',
defaultSeriesType: 'column'
,
yAxis:
min: min - ((max-min) * 0.05)
,
series: [
data: data
]
);
【讨论】:
【参考方案2】:尝试设置yAxis值,例如:
var chart = new Highcharts.Chart(
chart:
renderTo: 'container',
defaultSeriesType: 'column'
,
yAxis:
min: 390,
startOnTick: false
,
series: [
data: [400,405,395]
]
);
您还可以在 javascript 中将其设置为某种动态值(例如,AVG(400, 405, 395) - 10%),这应该可以提供足够的规模。
更新的 JSFiddle 是 here。
【讨论】:
以上是关于在 highcharts 中计算最小 y 轴值的主要内容,如果未能解决你的问题,请参考以下文章