Highstock堆叠列范围选择器

Question

in hilitock我尝试在我的堆叠柱状图中使用范围选择器。数据是消息数/月/国家，共16个国家。我激活了范围选择器来显示3个月、6个月、12个月或全部(我想在那之后显示3个月、6个月、12个月，但在^^之后)。但只有所有的工作。这是我的图表http://jsfiddle.net/Ee5Lm/.

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column',
        renderTo: 'container'
    },
    title: {
        text: 'Number of messages per Country'
    },
    rangeSelector: {
        enabled: true,
        inputEnabled: false,
        buttons: [{
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'month',
            count: 6,
            text: '6m'
        }, {
            type: 'month',
            count: 12,
            text: '12m'
        }, {
            type: 'all',
            text: 'All'
        }],
        selected: 0
    },
    xAxis: {
        categories: ['Dec-2009', 'Jan-2010', 'Feb-2010', 'Mar-2010', 'Apr-2010', 'May-2010', 'Jun-2010', 'Jul-2010', 'Aug-2010', 'Sep-2010', 'Oct-2010', 'Nov-2010', 'Dec-2010', 'Jan-2011', 'Feb-2011', 'Mar-2011', 'Apr-2011', 'May-2011', 'Jun-2011', 'Jul-2011', 'Aug-2011', 'Sep-2011', 'Oct-2011', 'Nov-2011', 'Dec-2011', 'Jan-2012', 'Feb-2012', 'Mar-2012', 'Apr-2012', 'May-2012', 'Jun-2012', 'Jul-2012', 'Aug-2012', 'Sep-2012', 'Oct-2012', 'Nov-2012', 'Dec-2012', 'Jan-2013', 'Feb-2013', 'Mar-2013', 'Apr-2013', 'May-2013', 'Jun-2013', 'Jul-2013', 'Aug-2013', 'Sep-2013', 'Oct-2013', 'Nov-2013', 'Dec-2013', 'Jan-2014', 'Feb-2014', 'Mar-2014', 'Apr-2014'],
        title: {
            text: 'month'
        },
        labels: {
            rotation: 30,
            align: 'left'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'nb_msg'
        },
        labels: {
            enabled: true,
            formatter: function () {
                return numeral(this.value).format('0.0a');
            }
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            },
            formatter: function () {
                return numeral(this.total).format('0.00a');
            }
        }
    },
    legend: {
        enabled: false,
        align: 'center',
        x: 0,
        verticalAlign: 'top',
        y: 30,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
        borderColor: '#000',
        borderWidth: 2,
        shadow: false
    },
    scrollbar: {
        enabled: true
    },
    tooltip: {
        crosshairs: true,
        shared: true,
        positioner: function () {
            return {
                x: 212,
                y: 75
            };
        },
        formatter: function () {
            var s = '<b>' + this.x + '</b>';
            total = 0;
            $.each(this.points, function (i, point) {
                s += '<br/><span style="color:' + point.series.color + '">' + point.series.name + '</span>: ' + numeral(point.y).format('0.00a');
                total += point.y;
            });
            return s + '<br/>' + '<b>Total: ' + numeral(total).format('0.00a') + '</b>';
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'argentina',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 36443, 0, 6, 0, 1, 0, 0, 1816084, 0, 7, 0, 0, 8, 1, 0, 5, 0, 11, 12, 4, 0, 0, 10, 408662, 1241832, 1847305, 25018467, 24746047, 12340782, 1685796]
    }, {
        name: 'belgium',
        data: [0, 48965263, 52045792, 67363255, 67260318, 59146084, 79911208, 70357625, 63303311, 82372035, 88063321, 91843987, 98366536, 97006908, 86075883, 97333025, 96502865, 123073373, 118922151, 91634371, 81714299, 108512823, 119206811, 123207128, 118485882, 121663629, 113313057, 112892261, 92071205, 94376311, 91511933, 90971990, 84599106, 96740435, 124996622, 121543175, 116866653, 119122957, 97024959, 110133140, 104857345, 117211630, 112837172, 103562568, 97710536, 113680723, 117977649, 116269828, 123879073, 126671795, 117927848, 123574902, 118021990]
    }, {
        name: 'brazil',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 133, 147142, 2421778, 6539204, 9395050, 19503422, 53915668, 87899526, 107358819, 186657818, 228760589, 173545743, 165382132, 231444579, 331101414, 460148825, 560661099, 530906127, 670926017, 647507313, 586987362, 570405121, 575952806, 502700039, 498789657, 639128607, 687634461, 660459824, 540207863, 503486747, 620312515, 606430933, 618384363, 542735605, 530712145, 559639380, 552958077, 516171719, 452008500, 526229944, 540005364, 544981844, 533100554, 607625393]
    }, {
        name: 'canada',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 37911, 568456, 1075601, 1177357, 5539475, 9011819, 7589594, 10211822, 8086672, 12585649, 11595472, 11128059, 9384310, 9324471, 12684070, 12912355, 13979334, 12269699, 9386665, 7203871, 5824031, 4182144, 6069342, 9214534, 8481455, 8441819, 10729325, 6974179, 8639043, 6754128, 6172551, 7289431, 7085641]
    }, {
        name: 'china',
        data: [0, 0, 0, 0, 0, 0, 0, 20958, 96777, 0, 1592377, 2467354, 0, 1007496, 3593696, 10874384, 12720055, 13822513, 15677388, 17001636, 20343172, 18614328, 15099726, 23416994, 50249409, 32928694, 22822149, 18736710, 14740430, 14764927, 17925736, 38378084, 22962736, 34072774, 27419832, 36280947, 26319787, 22310279, 12305225, 19279963, 24364482, 22565780, 29351793, 33121414, 40203439, 35697774, 31311081, 37918842, 30721418, 26043331, 13476258, 17409657, 19500101]
    }, {
        name: 'france',
        data: [0, 1543274529, 1563432041, 1937662949, 1818255373, 1900731616, 2309492540, 1992919579, 1602765469, 2080585422, 2296769719, 2279549466, 2250672678, 2202538162, 2060559183, 2338194100, 2182667589, 2330008947, 2388645189, 2220065123, 1815282159, 2226610094, 2206469410, 2299377509, 2362486514, 2390143435, 2132369712, 2314424536, 2086045736, 2218170033, 2212931104, 1884727046, 1531745928, 1799221948, 2158128762, 2094598192, 2068024008, 1978238166, 1754840783, 1887956685, 1842809521, 1842638947, 1822309312, 1765744737, 1409131158, 1639959414, 1767019644, 1712387820, 1748105537, 1655857758, 1472213150, 1641111876, 1662535186]
    }, {
        name: 'germany',
        data: [0, 193616576, 145527644, 143707793, 155021104, 171665602, 197634261, 186242813, 186810281, 206479999, 211042836, 240166057, 274370342, 219257460, 217026495, 257795873, 286158287, 325942767, 364948263, 406320253, 446179512, 470312296, 527759041, 457747023, 700817301, 626353597, 548752850, 433622173, 460321362, 430093411, 405606635, 440733983, 435437503, 369787609, 371232944, 367341227, 367452048, 343849833, 344316522, 409456611, 416086267, 416100268, 426027385, 450758571, 442744847, 404949530, 424977806, 430057348, 445090962, 1000516458, 999842296, 1059715431, 1116265054]
    }, {
        name: 'hong',
        data: [0, 0, 0, 0, 0, 6, 59879, 165477, 55857, 85213, 42952, 40610, 0, 61281, 120531, 118357, 485659, 992371, 813702, 707562, 1195648, 1323608, 1522641, 3101895, 3550048, 2671274, 3383005, 2926578, 3636028, 5746189, 8297633, 49113917, 55883873, 66367949, 78771670, 249522301, 201853554, 210634835, 120160259, 134914513, 145581877, 167207631, 165308557, 177726785, 169604665, 175224502, 130175586, 134309310, 140900113, 149571092, 151576978, 164427300, 175652544]
    }, {
        name: 'israel',
        data: [0, 45588, 19896, 77441, 287290, 533966, 603035, 1659240, 1593744, 2021828, 754136, 16522, 44637, 117060, 777880, 3925975, 6677213, 33311788, 22465591, 24960972, 34579265, 35613400, 48074112, 40214563, 40132141, 18973429, 19058997, 17204385, 30182597, 24665532, 23470479, 42660105, 35235388, 47885848, 50039534, 46065670, 69971366, 61876420, 72586056, 61638432, 45444563, 39407085, 32796063, 42821436, 42623342, 44333832, 57126099, 60299461, 62541646, 58152326, 53224039, 61276209, 62855261]
    }, {
        name: 'italy',
        data: [0, 605211, 879453, 1421112, 2372364, 3334719, 8902137, 9138213, 2213436, 12630006, 21047795, 25277018, 27671201, 24369794, 28255558, 29499820, 28315327, 36798788, 39156701, 37737685, 28727137, 54274339, 64736659, 68657223, 55230467, 55280021, 68365082, 86867760, 88541683, 96745806, 101497353, 82836164, 62778972, 117883500, 139700961, 140570529, 111627289, 101881703, 98642514, 100516181, 90107472, 96249855, 98617325, 93796430, 63456944, 85967960, 97634241, 87913088, 91868061, 84292813, 79961092, 77437165, 82650742]
    }, {
        name: 'mexico',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 38, 4927579, 6531491, 8331760, 8928739, 154092, 319246, 2285030, 2342553, 7319155, 9807910, 9195938, 9531430, 9425559, 8274341, 13640281, 14804295, 7979254, 6876206, 8818818, 10691596, 4384448, 11332129, 3888694, 6725545, 9703231, 11168659, 12791052, 5510661, 9383600, 12287561]
    }, {
        name: 'netherlands',
        data: [0, 23782538, 28053193, 30717475, 36918482, 38996008, 48696919, 34011239, 43575616, 44023152, 47907907, 58108455, 73400914, 47807266, 54547429, 57034919, 51019481, 64684392, 62013983, 66874054, 78649126, 83406806, 97187569, 115717225, 154590813, 112627000, 110357813, 108975901, 117657924, 128047020, 107884795, 102667992, 97175411, 86151860, 91453526, 113239965, 119340261, 86122446, 78502897, 78595948, 80154811, 84975486, 75040966, 86620185, 85850738, 72767602, 64521307, 62417597, 86682696, 58121381, 61174808, 69251853, 64441600]
    }, {
        name: 'scandinavia',
        data: [0, 63125592, 93268546, 116906537, 128176868, 123891154, 123094768, 119042464, 131968267, 115682015, 121670302, 117808314, 143958998, 124542520, 91466263, 158208175, 170831073, 181041004, 245597697, 229123009, 176360595, 192997660, 200063012, 266326816, 265593254, 228103352, 174294271, 176537431, 165822119, 209463065, 175628351, 166185537, 120953857, 127316429, 90885370, 157707771, 169042600, 158368974, 115872549, 144504843, 162182774, 144494460, 156378318, 176618574, 139556952, 166248095, 188908097, 164768050, 204145915, 158420093, 141911028, 147133442, 158955933]
    }, {
        name: 'spain',
        data: [0, 36771041, 46112461, 59753300, 51598375, 67080736, 98163245, 115439696, 116579988, 131987216, 145116431, 199185529, 281898524, 253834952, 277653875, 370978147, 445157148, 582344984, 644826806, 757542510, 795835480, 959244695, 1064886456, 1118908902, 1193699195, 1139060659, 1104408423, 1065720449, 926736865, 956134059, 907849887, 890174633, 749218381, 793960289, 801681976, 808590432, 768916215, 659837507, 583116095, 626346130, 641209546, 664522761, 640511040, 653106391, 572673316, 607468802, 591615611, 574063674, 590019259, 601123754, 595024335, 701925104, 737365924]
    }, {
        name: 'switzerland',
        data: [0, 53943313, 49782720, 58806320, 65364328, 63656606, 72590143, 84289561, 63076890, 76741335, 91679051, 97596462, 109641656, 117372633, 108425775, 113230643, 115897405, 135891700, 107352463, 135031539, 119035584, 115737356, 119706639, 118117219, 142606147, 122008867, 119186298, 131450948, 126020798, 118813229, 139721020, 146721700, 145327811, 145604660, 163578496, 183277537, 222195522, 207765375, 189486955, 203843177, 213078733, 211784807, 188831391, 175643027, 164260466, 160176515, 181435094, 186587917, 211165271, 218870984, 208781820, 216888917, 186237370]
    }, {
        name: 'uk',
        data: [0, 458320004, 444637578, 505680804, 499205052, 479508499, 535166745, 549658244, 582625938, 603192260, 563824810, 547553642, 574556016, 470754439, 491044089, 523529038, 541855914, 600078767, 534093091, 476755276, 484374029, 561459922, 578587050, 570740135, 533553626, 472551417, 471789281, 537569253, 521846491, 556393950, 564215176, 590677314, 584305113, 586822633, 699400384, 695598752, 635472058, 624707139, 582661410, 617715591, 572606073, 595582647, 602630990, 603648201, 626509871, 640759724, 714705927, 755224372, 813430333, 769847690, 688616215, 779014695, 782862514]
    }, {
        name: 'usa',
        data: [0, 51313992, 46292628, 47856377, 52834414, 69310399, 92384010, 96043401, 105146749, 116844867, 121052346, 99519385, 89380171, 73883822, 61880810, 73291498, 80080866, 93292930, 104593080, 104958539, 109718515, 124290942, 124617417, 138324093, 155420622, 143255381, 150314102, 190231334, 197627356, 236834013, 207829785, 221966110, 227854429, 250137567, 292695549, 339666723, 330860468, 310155188, 308077908, 360216666, 352276234, 370469195, 308361961, 322041276, 333959640, 352986585, 355278995, 368420132, 410131970, 366090805, 357212119, 408714230, 422197073]
    }]
});
});

Answer 1

Rangeselecotr需要日期时间数据(时间戳)而不是类别。

Answer 2

谢谢你的帮助。我改变了我的代码，它工作得很好。这是新的图表:http://jsfiddle.net/Ee5Lm/2/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            renderTo: 'container'
        },
        title: {
            text: 'Number of messages per Country'
        },
        rangeSelector: {
           enabled: true,
           inputEnabled: false,
           buttons: [{
              type: 'month',
              count: 3,
              text: '3m'
           }, {
              type: 'month',
              count: 6,
              text: '6m'
           }, {
              type: 'month',
              count: 12,
              text: '12m'
           }, {
              type: 'all',
              text: 'All'
           }],
           selected: 3
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { //custom date formats for different scales
               second: '%H:%M:%S',
               minute: '%H:%M',
               hour: '%H:%M',
               day: '%e. %b',
               week: '%e. %b',
               month: '%b-%Y', //month formatted as month only
               year: '%Y'
            },
            title: {
                text: 'month'
            },
            labels: {
                rotation: 30,
                align: 'left'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'nb_msg'
            },
            labels: {
               enabled: true,
               formatter: function () {
                  return numeral(this.value).format('0.0a');
               }
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                },
                formatter: function () {
                  return numeral(this.total).format('0.00a');
               }
            }
        },
        legend: {
            align: 'center',
            x: 0,
            verticalAlign: 'top',
            y: 30,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#000',
            borderWidth: 2,
            shadow: false
        },
        scrollbar: {
            enabled: true
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            positioner: function () {
                    return { x: 212, y: 75 };
            },
            formatter: function () {
               var s = '<b>'+ this.x +'</b>';
                   total = 0;
               $.each(this.points, function(i, point) {
                  s += '<br/><span style="color:' + point.series.color + '">'+ point.series.name +'</span>: '+ numeral(point.y).format('0.00a');
                  total += point.y;
               });
               return s + '<br/>' + '<b>Total: ' + numeral(total).format('0.00a') + '</b>';
            }
        },
         plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0.2,
                borderWidth: 0,
                dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [ {name: 'belgium',data: [{x: Date.UTC(2009,11),y:0},{x: Date.UTC(2010,0),y:48965263},{x: Date.UTC(2010,1),y:52045792},{x: Date.UTC(2010,2),y:67363255},{x: Date.UTC(2010,3),y:67260318},{x: Date.UTC(2010,4),y:59146084},{x: Date.UTC(2010,5),y:79911208},{x: Date.UTC(2010,6),y:70357625},{x: Date.UTC(2010,7),y:63303311},{x: Date.UTC(2010,8),y:82372035},{x: Date.UTC(2010,9),y:88063321},{x: Date.UTC(2010,10),y:91843987},{x: Date.UTC(2010,11),y:98366536},{x: Date.UTC(2011,0),y:97006908},{x: Date.UTC(2011,1),y:86075883},{x: Date.UTC(2011,2),y:97333025},{x: Date.UTC(2011,3),y:96502865},{x: Date.UTC(2011,4),y:123073373},{x: Date.UTC(2011,5),y:118922151},{x: Date.UTC(2011,6),y:91634371},{x: Date.UTC(2011,7),y:81714299},{x: Date.UTC(2011,8),y:108512823},{x: Date.UTC(2011,9),y:119206811},{x: Date.UTC(2011,10),y:123207128},{x: Date.UTC(2011,11),y:118485882},{x: Date.UTC(2012,0),y:121663629},{x: Date.UTC(2012,1),y:113313057},{x: Date.UTC(2012,2),y:112892261},{x: Date.UTC(2012,3),y:92071205},{x: Date.UTC(2012,4),y:94376311},{x: Date.UTC(2012,5),y:91511933},{x: Date.UTC(2012,6),y:90971990},{x: Date.UTC(2012,7),y:84599106},{x: Date.UTC(2012,8),y:96740435},{x: Date.UTC(2012,9),y:124996622},{x: Date.UTC(2012,10),y:121543175},{x: Date.UTC(2012,11),y:116866653},{x: Date.UTC(2013,0),y:119122957},{x: Date.UTC(2013,1),y:97024959},{x: Date.UTC(2013,2),y:110133140},{x: Date.UTC(2013,3),y:104857345},{x: Date.UTC(2013,4),y:117211630},{x: Date.UTC(2013,5),y:112837172},{x: Date.UTC(2013,6),y:103562568},{x: Date.UTC(2013,7),y:97710536},{x: Date.UTC(2013,8),y:113680723},{x: Date.UTC(2013,9),y:117977649},{x: Date.UTC(2013,10),y:116269828},{x: Date.UTC(2013,11),y:123879073},{x: Date.UTC(2014,0),y:126671795},{x: Date.UTC(2014,1),y:117927848},{x: Date.UTC(2014,2),y:123574902},{x: Date.UTC(2014,3),y:118021990}]}]
    });
});

但是现在在我的工具提示中，在格式化程序中，对于X值，我有一个时间戳，而不是"人类"日期。我试着应用日期函数，但它不起作用。关于这个问题有什么想法吗?

Answer 3

解决方案找到:对不起，我不是javascript专家，但有了这个，它就可以工作了。

var mydate = new Date(this.x);
var myformatdate = (mydate.getMonth()+1)+'-'+mydate.getFullYear();