javascript - 在 Jquery 中创建图表时选择的 rangeSelector 不起作用

Question

我正在用 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,
                                        },
                                    }
                                ]
                    });

Answer 1

您需要为每个按钮定义count 和type 属性:

rangeSelector: {
    inputEnabled: false,
    buttons: [{
            count: 1,
            type: 'minute',
            text: 'max'
        },
        ...
    ],
    ...
}

现场演示: https://jsfiddle.net/BlackLabel/anf3rzp4/

文档: https://www.highcharts.com/docs/stock/range-selector