如何使用Highchart自动计算的最小值和最大值,除非它们高于或低于预定义的最小值和最大值
How to use Highchart auto calculated min and max values, unless they are above or below a predefined min and max
我正在寻找一种方法来使用Highcharts自动计算的最小值和最大值,除非它们高于或低于预定义的最小值和最大值。例如,如果我的数据集永远不会低于零,使用自动计算的最小值,除非它自动计算到负数。如果我将最小值设置为0,图表总是从0开始(我失去了自动调整功能)。
我发现这个问题是类似的,我如何设置一个坐标轴的最小上限在Highcharts?
这就是我所实现的,它完美地用于加载事件。当我打开和关闭图例系列时,如何添加相同的逻辑?切换序列后,图表自动调整回负数。
http://jsfiddle.net/min123/9JHPn/ var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Line Chart'
},
xAxis: {
categories: [2008, 2009, 2010, 2011, 2012],
labels: {
formatter: function () {
return this.value + "";
}
}
},
yAxis: {
labels: {
formatter: function () {
return "$" + Highcharts.numberFormat(this.value, 0);
},
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer'
},
line: {
events: {
legendItemClick: function (event) {
this.chart.yAxis[0].setExtremes(null, null);
}
}
}
},
series: [{
name: 'set 1',
color: '#2f7ed8',
data: [17528662.0, 20197401.0, 23640296.0, 22672580.0, 23082628.0],
}, {
name: 'set 2',
color: '#910000',
data: [757217.0, 810883.0, 742511.0, 798738.0, 869334.0],
}, {
name: 'set 3',
color: '#8bbc21',
data: [17528662.0, 207030.0, 190072.0, 249713.0, 243730.0],
}, {
name: 'set 4',
color: '#492970',
data: [29424.0, 24968.0, 37651.5, 32807.0, 360890.0],
}]
});
checkExtremes = function () {
alert('checkExtremes was called');
var redraw_flag = false;
thisSetMin = this.Highcharts.charts[0].yAxis[0].getExtremes().min;
thisSetMax = this.Highcharts.charts[0].yAxis[0].getExtremes().max;
thisDataMin = this.Highcharts.charts[0].yAxis[0].getExtremes().dataMin;
thisDataMax = this.Highcharts.charts[0].yAxis[0].getExtremes().dataMax;
//resize to userMin if dataMin is greater than userMin and autoCalcMin is less than userMin
min_y_val = thisSetMin;
yaxis_min = 0;
if (yaxis_min != null) {
if (thisDataMin >= yaxis_min && thisSetMin < yaxis_min) {
alert('Resizing Min from ' + thisSetMin + ' to ' + yaxis_min);
redraw_flag = true;
min_y_val = 0;
}
}
//resize to userMax if dataMax is less than userMax and autoCalcMax is greater than userMax
max_y_val = thisSetMax;
yaxis_max = 30000000;
if (yaxis_max != null) {
if (thisDataMax <= yaxis_max && thisSetMax > yaxis_max) {
alert('Resizing Max from ' + thisSetMax + ' to ' + yaxis_max);
redraw_flag = true
max_y_val = 30000000;
}
}
if (redraw_flag) {
this.Highcharts.charts[0].yAxis[0].setExtremes(min_y_val, max_y_val);
}
}
$(chart).on('redraw', checkExtremes(this));
您可以使用tickPositioner,它允许准备动态刻度计算
相关文章:
- jquery最小和最大长度验证
- 日期选择器的最小和最大日期
- 如何在 ag-grid 中设置默认的最小和最大列宽
- webpack优化最小化返回布尔值,而不是工厂值
- 从显示为文本的范围中返回最小和最大数字
- 如何为日期选择器设置最小和最大日期
- 带有最小和最大数字的增量数组列表
- 最小和最大轴值在具有对数轴的高图表中不适用
- 如何获取最小和最大日期
- 如何从表的选定行中获取最小和最大数量
- 角度最小和最大时间不工作
- Soundcloud最小页面过大
- 具有最小和最大数字的十进制值的javascript正则表达式
- 如何根据其他日期约束jQuery ui日期选择器的最小和最大日期
- y轴最小和最大值范围显示
- 下拉的最小和最大值,不更新在EI9和IE8的JQuery
- JavaScript数学.最小返回错误的值
- 取最小和最大的数到我的值的左右
- 我如何得到这个脚本运行返回所需的值的最小,最大和总和
- 如何在JavaScript中比较最小订单数量的值