我正在用 jquery 创建 highstock 图表。 rangeSelector 的选定选项不起作用。即它不会突出显示按钮。 我无法弄清楚为什么这不起作用，代码看起来完全没问题。 任何帮助，将不胜感激。
编辑: 代码链接:https://jsfiddle.net/thinkTwiceCodeOnce/ptjc1m3g/3/
function createDataObjects(statistic='mean') {
var objArray = [];
for(i=0; i<xValues.length; i++){
var obj = {
y: yValues[statistic][i],
x: xValues[i],
};
objArray.push(obj);
}
return objArray;
}
var xValues = [1558723440000, 1558723500000, 1558723560000, 1558723620000, 1558723680000, 1558723740000, 1558723800000, 1558723860000, 1558723920000, 1558723980000, 1558724040000, 1558724100000, 1558724160000, 1558724220000, 1558724280000, 1558724340000, 1558724400000, 1558724460000, 1558724520000, 1558724580000, 1558724640000, 1558724700000, 1558724760000, 1558724820000, 1558724880000, 1558724940000, 1558725000000, 1558725060000, 1558725120000]
var yValues = {}
yValues['Count'] = [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 1];
yValues['Max'] = [6.9040022639436955, 7.277191147774248, 7.228316797341365, 23.900732012493673, 157.9121404910129, 251.86774191445429, 267.42580025317164, 273.5247004251928, 272.99116113235766, 272.2196366996148, 274.32047314076476, 272.7943350885754, 271.5066224408174, 273.86848525811007, 272.43913733235064, 275.0870022949605, 290.10507235408437, 276.52649359755316, 273.7283406757012, 274.90672951870494, 273.5288605676468, 274.2120260972348, 277.0470024528921, 275.00663596555637, 274.2950022869438, 274.4515922007804, 275.578046623468, 275.45865384890743, 275.64702925315447];
yValues['Min'] = [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.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 275.64702925315447];
yValues['Median'] = [5.655492281849643, 5.351555378448816, 0.0, 0.0, 0.0, 104.37724116764429, 265.4339925654742, 268.1068112814569, 267.74521126523797, 271.05033040304, 135.47580104169634, 0.0, 0.0, 0.0, 135.78734293455992, 272.3860627199325, 136.9442681771138, 0.0, 136.17789269243835, 273.81736457998755, 0.0, 136.18620788724544, 137.30891046336575, 135.8138087529591, 0.0, 271.6148535663434, 136.6547997616739, 135.7239865248602, 275.64702925315447];
yValues['mean'] = [4.1020988298407595, 4.844101358450243, 1.2047194662235607, 5.28794528768783, 41.552324570469004, 116.89886382937216, 177.45882001678385, 224.37233272657883, 179.6791254852659, 226.004458290133, 136.11035641100577, 90.61927551577088, 45.25110374013624, 45.64474754301835, 135.94304952884727, 227.31634067284878, 139.83521989937313, 91.5359603365085, 136.5786565122486, 182.90160835816766, 91.00958859540417, 136.64626285346122, 138.08038781639715, 136.82293358337358, 91.23286878390577, 181.79699646086806, 137.2279225864877, 136.91882475680077, 275.64702925315447];
yValues['SD'] = [3.2203685321979814, 2.4901129926862318, 2.9509479754458376, 9.640869087591746, 67.72142993409697, 128.83662653969571, 137.4611862347386, 109.94317190623201, 139.19205303169562, 110.72067659677353, 149.1059249984213, 140.38802743577105, 110.84211446108121, 111.80634091855111, 148.91845923417634, 111.37065678019974, 153.2888072874348, 141.81209156150837, 149.61510494433705, 141.67585767048985, 140.9918031555292, 149.6896115263383, 151.26186458977534, 149.88625569455175, 141.33785588774123, 140.82344982400474, 150.3273695756875, 149.9930108386384, "null"];
yValues['90'] = [6.6508042076726355, 6.5344142754998105, 3.6141583986706824, 15.863835863063489, 124.656973711407, 246.3193503204722, 266.9424674848773, 271.4868203138619, 271.2921651905597, 271.74116946373135, 272.855268191321, 271.85782654731264, 135.7533112204087, 136.93424262905503, 272.0418056519819, 274.15269579372455, 282.56139152100565, 274.6078810095255, 273.55807684430755, 274.8874604945155, 273.0287657862125, 273.7525806731382, 276.9322529858257, 274.6549919971617, 273.69860635171733, 273.77613581626076, 275.0289679977892, 275.03248774554214, 275.64702925315447];
yValues['95'] = [6.7774032358081655, 6.90580271163703, 5.421237598006024, 19.88228393777858, 141.28455710120994, 249.09354611746323, 267.18413386902444, 272.50576036952737, 272.14166316145867, 271.9804030816731, 273.5878706660429, 272.326080817944, 203.62996683061306, 205.40136394358257, 272.2404714921663, 274.6198490443425, 286.333231937545, 275.56718730353936, 273.64320876000437, 274.89709500661024, 273.27881317692965, 273.98230338518647, 276.9896277193589, 274.83081398135903, 273.9968043193306, 274.1138640085206, 275.3035073106286, 275.2455707972248, 275.64702925315447];
yValues['99'] = [6.8786824583165895, 7.202913460546805, 6.866900957474298, 23.09704239755066, 154.5866238130523, 251.3129027550561, 267.3774669763422, 273.32091241405976, 272.82126153817785, 272.17178997602645, 274.17395264582035, 272.7006842344491, 257.9312913187766, 260.1750609952046, 272.39940416431375, 274.9935716448369, 289.3507042707765, 276.3346323387504, 273.71131429256184, 274.904802616286, 273.4788510895034, 274.1660815548251, 277.0355275061855, 274.9714715687169, 274.23536269342117, 274.3840465623284, 275.52313876090017, 275.41603723857094, 275.64702925315447];
Highcharts.stockChart('container',{
chart:{
type: 'line',
zoomType: 'x',
},
title:{ text: 'Title' },
subtitle:{ text: 'Click on a point to expand' },
credits: { enabled: false },
tooltip:{
formatter: function() {
return 'hi';
},
},
plotOptions:{
series:{
point:{
events:{
click: function(){
alert('click');
}
}
},
cursor: 'pointer',
connectNulls: true
}
},
yAxis:{ type: 'logarithmic' },
navigator: { enabled: false },
scrollbar: { enabled: false },
rangeSelector: {
inputEnabled: false,
count : 0,
buttons: [
{ text: 'max' },
{ text: 'mean' },
{ text: 'min' },
{ text: 'median'},
{ text: 'std' },
{ text: 'count' },
{ text: '90' },
{ text: '95' },
{ text: '99' },
],
selected:1,
buttonTheme: {
width: 42,
fill: 'none',
stroke: 'none',
},
},
xAxis:{
type: 'datetime',
events: {
setExtremes: function(e) {
if(e.trigger === 'rangeSelectorButton') {
e.preventDefault();
}
}
},
labels:{
formatter: function(){
return Highcharts.dateFormat('%H:%M', this.value);
},
},
},
series: [
{
data: createDataObjects(),
name: 'data',
marker : {
enabled:true,
radius: 4,
},
}
]
});
最佳答案
您需要为每个按钮定义count 和type 属性:
rangeSelector: {
inputEnabled: false,
buttons: [{
count: 1,
type: 'minute',
text: 'max'
},
...
],
...
}
关于javascript - 在 Jquery 中创建图表时选择的 rangeSelector 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56450333/