Highcharts / Highstock 向右滚动
Highcharts / Highstock scroll to right
我有一个启用了滚动功能的 Highstock 图表。当图表加载时，我希望它在默认情况下一直滚动到右侧，但默认情况下它一直滚动到左侧。
这是我的代码，你可以运行这里http://jsfiddle.net/L5s164b1/
var chartData = [{"name":"Expected","data":[0,0,102,102,34,17,17,0,0,34,68,34,161,68,17,17,68,43,90,110,74,17,0,72,51,34,119,51,17,34,102,165,85,100,102,0,0,85,42,68,68,51,0,17,17,142,68,114,34,51,38,68,134,0,219,97,0,0,49,34,34,89,34,0,68,136,119,68,170,299,0,0,102,17,17,85,17,25,0,17,34,17,0,59,0,0,78,0,102,68,34,0,17,59,74,34,94,0,0,17,25,0,43,59,34,0,17,0,51,0,17,98,17,0,17,116,0,85,0,17,17,34,17,17,34,68,25,34,34,17,157,102,68,17,0,51,0,51,102,85,0,0,49,34,85,189,99,0,0,34,34,102,51,34,0,17,21,77,34,203,34,0,34,92,0,17,51,64,0,68,17,68,17,86,0,0,0,0,0,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"scrollbar":{"enabled":true,"barBackgroundColor":"gray","barBorderRadius":7,"barBorderWidth":0,"buttonBackgroundColor":"gray","buttonBorderWidth":0,"buttonArrowColor":"yellow","buttonBorderRadius":7,"rifleColor":"yellow","trackBackgroundColor":"white","trackBorderWidth":1,"trackBorderColor":"silver","trackBorderRadius":7}},{"name":"Actual","data":[249,543,676,933,554,1196,969,411,501,786,489,568,1026,877,349,561,707,623,724,1254,604,286,601,739,613.08,887,1085,816,332,507,574,763,818,1681,970,0,0,920,627.999,640,1056,694,371.0204,410,755,498,912,1419,443,216,679,733,123,752,1223,882,307,468,429,442,539,729,1113.9995,433.9994,528,520,765,861,737,882.999,498,573,599,651.0003,764,928,786,279,506,829,504,1067,671,774,378,436,484,637,697,1029,687,462,238,840,639,975,1316,418,274,427,483,380,723,1069,973,297,548,573,424,866,1255,994,462,493,1033.9994,1462,0,468,837,404,499,676,693,640,925,1085,341,374,700,483,757,937,948,204,381,484,516,664,1226,872,528,598,949,1077.001,1135.9996,1856,770,0,0,704,849,776,1338,928,0,360,372,507,658,1065,928,384,375,518,551,632,1052,1179,422,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"scrollbar":{"enabled":true,"barBackgroundColor":"gray","barBorderRadius":7,"barBorderWidth":0,"buttonBackgroundColor":"gray","buttonBorderWidth":0,"buttonArrowColor":"yellow","buttonBorderRadius":7,"rifleColor":"yellow","trackBackgroundColor":"white","trackBorderWidth":1,"trackBorderColor":"silver","trackBorderRadius":7}}];
var chartCategories = ["7/31/2016","8/1/2016","8/2/2016","8/3/2016","8/4/2016","8/5/2016","8/6/2016","8/7/2016","8/8/2016","8/9/2016","8/10/2016","8/11/2016","8/12/2016","8/13/2016","8/14/2016","8/15/2016","8/16/2016","8/17/2016","8/18/2016","8/19/2016","8/20/2016","8/21/2016","8/22/2016","8/23/2016","8/24/2016","8/25/2016","8/26/2016","8/27/2016","8/28/2016","8/29/2016","8/30/2016","8/31/2016","9/1/2016","9/2/2016","9/3/2016","9/4/2016","9/5/2016","9/6/2016","9/7/2016","9/8/2016","9/9/2016","9/10/2016","9/11/2016","9/12/2016","9/13/2016","9/14/2016","9/15/2016","9/16/2016","9/17/2016","9/18/2016","9/19/2016","9/20/2016","9/21/2016","9/22/2016","9/23/2016","9/24/2016","9/25/2016","9/26/2016","9/27/2016","9/28/2016","9/29/2016","9/30/2016","10/1/2016","10/2/2016","10/3/2016","10/4/2016","10/5/2016","10/6/2016","10/7/2016","10/8/2016","10/9/2016","10/10/2016","10/11/2016","10/12/2016","10/13/2016","10/14/2016","10/15/2016","10/16/2016","10/17/2016","10/18/2016","10/19/2016","10/20/2016","10/21/2016","10/22/2016","10/23/2016","10/24/2016","10/25/2016","10/26/2016","10/27/2016","10/28/2016","10/29/2016","10/30/2016","10/31/2016","11/1/2016","11/2/2016","11/3/2016","11/4/2016","11/5/2016","11/6/2016","11/7/2016","11/8/2016","11/9/2016","11/10/2016","11/11/2016","11/12/2016","11/13/2016","11/14/2016","11/15/2016","11/16/2016","11/17/2016","11/18/2016","11/19/2016","11/20/2016","11/21/2016","11/22/2016","11/23/2016","11/24/2016","11/25/2016","11/26/2016","11/27/2016","11/28/2016","11/29/2016","11/30/2016","12/1/2016","12/2/2016","12/3/2016","12/4/2016","12/5/2016","12/6/2016","12/7/2016","12/8/2016","12/9/2016","12/10/2016","12/11/2016","12/12/2016","12/13/2016","12/14/2016","12/15/2016","12/16/2016","12/17/2016","12/18/2016","12/19/2016","12/20/2016","12/21/2016","12/22/2016","12/23/2016","12/24/2016","12/25/2016","12/26/2016","12/27/2016","12/28/2016","12/29/2016","12/30/2016","12/31/2016","1/1/2017","1/2/2017","1/3/2017","1/4/2017","1/5/2017","1/6/2017","1/7/2017","1/8/2017","1/9/2017","1/10/2017","1/11/2017","1/12/2017","1/13/2017","1/14/2017","1/15/2017","1/16/2017","1/17/2017","1/18/2017","1/19/2017","1/20/2017","1/21/2017","1/22/2017","1/23/2017","1/24/2017","1/25/2017","1/26/2017","1/27/2017","1/28/2017","1/29/2017","1/30/2017","1/31/2017","2/1/2017","2/2/2017","2/3/2017","2/4/2017","2/5/2017","2/6/2017","2/7/2017","2/8/2017","2/9/2017","2/10/2017","2/11/2017","2/12/2017","2/13/2017","2/14/2017","2/15/2017","2/16/2017","2/17/2017","2/18/2017","2/19/2017","2/20/2017","2/21/2017","2/22/2017","2/23/2017","2/24/2017","2/25/2017","2/26/2017","2/27/2017"];
Highcharts.chart('container', {
chart: {
type: 'column',
zoomType: 'x'
},
scrollbar: {
enabled: true
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
xAxis: {
categories: chartCategories,
crosshair: false,
labels: {
enabled: true
},
max: 0,
min: 30
},
yAxis: {
min: 0,
title: {
text: '',
style: {
display: 'none'
}
}
},
tooltip: {
headerFormat: '<strong>{series.name}</strong> - ',
pointFormat: '{point.y:.2f}'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
borderWidth: 0
}
},
legend: {
itemStyle: {
color: 'black',
fontWeight: 'normal'
}
},
series: chartData
});
在加载事件中，当最大是最后一个类别时，您可以使用 axis.setExtremes()。
chart: {
type: 'column',
zoomType: 'x',
events: {
load: function () {
var catLen = this.xAxis[0].categories.length - 1;
this.xAxis[0].setExtremes(catLen - 30, catLen);
}
}
},
我有一个启用了滚动功能的 Highstock 图表。当图表加载时，我希望它在默认情况下一直滚动到右侧，但默认情况下它一直滚动到左侧。
这是我的代码，你可以运行这里http://jsfiddle.net/L5s164b1/
var chartData = [{"name":"Expected","data":[0,0,102,102,34,17,17,0,0,34,68,34,161,68,17,17,68,43,90,110,74,17,0,72,51,34,119,51,17,34,102,165,85,100,102,0,0,85,42,68,68,51,0,17,17,142,68,114,34,51,38,68,134,0,219,97,0,0,49,34,34,89,34,0,68,136,119,68,170,299,0,0,102,17,17,85,17,25,0,17,34,17,0,59,0,0,78,0,102,68,34,0,17,59,74,34,94,0,0,17,25,0,43,59,34,0,17,0,51,0,17,98,17,0,17,116,0,85,0,17,17,34,17,17,34,68,25,34,34,17,157,102,68,17,0,51,0,51,102,85,0,0,49,34,85,189,99,0,0,34,34,102,51,34,0,17,21,77,34,203,34,0,34,92,0,17,51,64,0,68,17,68,17,86,0,0,0,0,0,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"scrollbar":{"enabled":true,"barBackgroundColor":"gray","barBorderRadius":7,"barBorderWidth":0,"buttonBackgroundColor":"gray","buttonBorderWidth":0,"buttonArrowColor":"yellow","buttonBorderRadius":7,"rifleColor":"yellow","trackBackgroundColor":"white","trackBorderWidth":1,"trackBorderColor":"silver","trackBorderRadius":7}},{"name":"Actual","data":[249,543,676,933,554,1196,969,411,501,786,489,568,1026,877,349,561,707,623,724,1254,604,286,601,739,613.08,887,1085,816,332,507,574,763,818,1681,970,0,0,920,627.999,640,1056,694,371.0204,410,755,498,912,1419,443,216,679,733,123,752,1223,882,307,468,429,442,539,729,1113.9995,433.9994,528,520,765,861,737,882.999,498,573,599,651.0003,764,928,786,279,506,829,504,1067,671,774,378,436,484,637,697,1029,687,462,238,840,639,975,1316,418,274,427,483,380,723,1069,973,297,548,573,424,866,1255,994,462,493,1033.9994,1462,0,468,837,404,499,676,693,640,925,1085,341,374,700,483,757,937,948,204,381,484,516,664,1226,872,528,598,949,1077.001,1135.9996,1856,770,0,0,704,849,776,1338,928,0,360,372,507,658,1065,928,384,375,518,551,632,1052,1179,422,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"scrollbar":{"enabled":true,"barBackgroundColor":"gray","barBorderRadius":7,"barBorderWidth":0,"buttonBackgroundColor":"gray","buttonBorderWidth":0,"buttonArrowColor":"yellow","buttonBorderRadius":7,"rifleColor":"yellow","trackBackgroundColor":"white","trackBorderWidth":1,"trackBorderColor":"silver","trackBorderRadius":7}}];
var chartCategories = ["7/31/2016","8/1/2016","8/2/2016","8/3/2016","8/4/2016","8/5/2016","8/6/2016","8/7/2016","8/8/2016","8/9/2016","8/10/2016","8/11/2016","8/12/2016","8/13/2016","8/14/2016","8/15/2016","8/16/2016","8/17/2016","8/18/2016","8/19/2016","8/20/2016","8/21/2016","8/22/2016","8/23/2016","8/24/2016","8/25/2016","8/26/2016","8/27/2016","8/28/2016","8/29/2016","8/30/2016","8/31/2016","9/1/2016","9/2/2016","9/3/2016","9/4/2016","9/5/2016","9/6/2016","9/7/2016","9/8/2016","9/9/2016","9/10/2016","9/11/2016","9/12/2016","9/13/2016","9/14/2016","9/15/2016","9/16/2016","9/17/2016","9/18/2016","9/19/2016","9/20/2016","9/21/2016","9/22/2016","9/23/2016","9/24/2016","9/25/2016","9/26/2016","9/27/2016","9/28/2016","9/29/2016","9/30/2016","10/1/2016","10/2/2016","10/3/2016","10/4/2016","10/5/2016","10/6/2016","10/7/2016","10/8/2016","10/9/2016","10/10/2016","10/11/2016","10/12/2016","10/13/2016","10/14/2016","10/15/2016","10/16/2016","10/17/2016","10/18/2016","10/19/2016","10/20/2016","10/21/2016","10/22/2016","10/23/2016","10/24/2016","10/25/2016","10/26/2016","10/27/2016","10/28/2016","10/29/2016","10/30/2016","10/31/2016","11/1/2016","11/2/2016","11/3/2016","11/4/2016","11/5/2016","11/6/2016","11/7/2016","11/8/2016","11/9/2016","11/10/2016","11/11/2016","11/12/2016","11/13/2016","11/14/2016","11/15/2016","11/16/2016","11/17/2016","11/18/2016","11/19/2016","11/20/2016","11/21/2016","11/22/2016","11/23/2016","11/24/2016","11/25/2016","11/26/2016","11/27/2016","11/28/2016","11/29/2016","11/30/2016","12/1/2016","12/2/2016","12/3/2016","12/4/2016","12/5/2016","12/6/2016","12/7/2016","12/8/2016","12/9/2016","12/10/2016","12/11/2016","12/12/2016","12/13/2016","12/14/2016","12/15/2016","12/16/2016","12/17/2016","12/18/2016","12/19/2016","12/20/2016","12/21/2016","12/22/2016","12/23/2016","12/24/2016","12/25/2016","12/26/2016","12/27/2016","12/28/2016","12/29/2016","12/30/2016","12/31/2016","1/1/2017","1/2/2017","1/3/2017","1/4/2017","1/5/2017","1/6/2017","1/7/2017","1/8/2017","1/9/2017","1/10/2017","1/11/2017","1/12/2017","1/13/2017","1/14/2017","1/15/2017","1/16/2017","1/17/2017","1/18/2017","1/19/2017","1/20/2017","1/21/2017","1/22/2017","1/23/2017","1/24/2017","1/25/2017","1/26/2017","1/27/2017","1/28/2017","1/29/2017","1/30/2017","1/31/2017","2/1/2017","2/2/2017","2/3/2017","2/4/2017","2/5/2017","2/6/2017","2/7/2017","2/8/2017","2/9/2017","2/10/2017","2/11/2017","2/12/2017","2/13/2017","2/14/2017","2/15/2017","2/16/2017","2/17/2017","2/18/2017","2/19/2017","2/20/2017","2/21/2017","2/22/2017","2/23/2017","2/24/2017","2/25/2017","2/26/2017","2/27/2017"];
Highcharts.chart('container', {
chart: {
type: 'column',
zoomType: 'x'
},
scrollbar: {
enabled: true
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
xAxis: {
categories: chartCategories,
crosshair: false,
labels: {
enabled: true
},
max: 0,
min: 30
},
yAxis: {
min: 0,
title: {
text: '',
style: {
display: 'none'
}
}
},
tooltip: {
headerFormat: '<strong>{series.name}</strong> - ',
pointFormat: '{point.y:.2f}'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
borderWidth: 0
}
},
legend: {
itemStyle: {
color: 'black',
fontWeight: 'normal'
}
},
series: chartData
});
在加载事件中，当最大是最后一个类别时，您可以使用 axis.setExtremes()。
chart: {
type: 'column',
zoomType: 'x',
events: {
load: function () {
var catLen = this.xAxis[0].categories.length - 1;
this.xAxis[0].setExtremes(catLen - 30, catLen);
}
}
},