Question

我希望根据星期几显示多周数据。（非常类似于Google分析在比较每周网页浏览量时显示的内容）

除了格式化x标签： xAxis：{ 键入：＆＃39; datetime＆＃39;，标签： { formatter：function（）{ var d = new Date（this.value）; return d.getDay（）; } } 我还需要设置其他配置吗？

＆＃13;

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Page View'
        },
        subtitle: {
            text: 'Weekly Comparison'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                formatter : function () {
                    var d= new Date(this.value);
                    return d.getDay();
                }
            },
            title: {
                text: 'Day of the week'
            }
        },
        yAxis: {
            title: {
                text: 'Page Views'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        series: [{
            name: 'Week 2',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [
[Date.UTC(2014,10,10, 2, 0), 44863],
[Date.UTC(2014,10,10, 3, 0), 48086],
[Date.UTC(2014,10,10, 4, 0), 46674],
[Date.UTC(2014,10,10, 5, 0), 41468],
[Date.UTC(2014,10,10, 6, 0), 39367],
[Date.UTC(2014,10,10, 7, 0), 42052],
[Date.UTC(2014,10,10, 8, 0), 43511],
[Date.UTC(2014,10,10, 9, 0), 35663],
[Date.UTC(2014,10,10, 10, 0), 35832],
[Date.UTC(2014,10,10, 11, 0), 39495],
[Date.UTC(2014,10,10, 12, 0), 39038],
[Date.UTC(2014,10,10, 13, 0), 43969],
[Date.UTC(2014,10,10, 14, 0), 51427],
[Date.UTC(2014,10,10, 15, 0), 59542],
[Date.UTC(2014,10,10, 16, 0), 53141],
[Date.UTC(2014,10,10, 17, 0), 53176],
[Date.UTC(2014,10,10, 18, 0), 57119],
[Date.UTC(2014,10,10, 19, 0), 56996],
[Date.UTC(2014,10,10, 20, 0), 63539],
[Date.UTC(2014,10,10, 21, 0), 69481],
[Date.UTC(2014,10,10, 22, 0), 65675],
[Date.UTC(2014,10,10, 23, 0), 60884],
[Date.UTC(2014,10,11, 0, 0), 53482],
[Date.UTC(2014,10,11, 1, 0), 49271],
[Date.UTC(2014,10,11, 2, 0), 46809],
[Date.UTC(2014,10,11, 3, 0), 45538],
[Date.UTC(2014,10,11, 4, 0), 47882],
[Date.UTC(2014,10,11, 5, 0), 40072],
[Date.UTC(2014,10,11, 6, 0), 32432],
[Date.UTC(2014,10,11, 7, 0), 38227],
[Date.UTC(2014,10,11, 8, 0), 32454],
[Date.UTC(2014,10,11, 9, 0), 35582],
[Date.UTC(2014,10,11, 10, 0), 30703],
[Date.UTC(2014,10,11, 11, 0), 34655],
[Date.UTC(2014,10,11, 12, 0), 33566],
[Date.UTC(2014,10,11, 13, 0), 40084],
[Date.UTC(2014,10,11, 14, 0), 44210],
[Date.UTC(2014,10,11, 15, 0), 56748],
[Date.UTC(2014,10,11, 16, 0), 56700],
[Date.UTC(2014,10,11, 17, 0), 60326],
[Date.UTC(2014,10,11, 18, 0), 63289],
[Date.UTC(2014,10,11, 19, 0), 60122],
[Date.UTC(2014,10,11, 20, 0), 57214],
[Date.UTC(2014,10,11, 21, 0), 57609],
[Date.UTC(2014,10,11, 22, 0), 59149],
[Date.UTC(2014,10,11, 23, 0), 56632],
[Date.UTC(2014,10,12, 2, 0), 19928],
[Date.UTC(2014,10,12, 3, 0), 44005],
[Date.UTC(2014,10,12, 4, 0), 44439],
[Date.UTC(2014,10,12, 5, 0), 40798],
[Date.UTC(2014,10,12, 6, 0), 38766],
[Date.UTC(2014,10,12, 7, 0), 38498],
[Date.UTC(2014,10,12, 8, 0), 38241],
[Date.UTC(2014,10,12, 9, 0), 39251],
[Date.UTC(2014,10,12, 10, 0), 39571],
[Date.UTC(2014,10,12, 11, 0), 40337],
[Date.UTC(2014,10,12, 12, 0), 41540],
[Date.UTC(2014,10,12, 13, 0), 47470],
[Date.UTC(2014,10,12, 14, 0), 51736],
[Date.UTC(2014,10,12, 15, 0), 60009],
[Date.UTC(2014,10,12, 16, 0), 60912],
[Date.UTC(2014,10,12, 17, 0), 64551],
[Date.UTC(2014,10,12, 18, 0), 65835],
[Date.UTC(2014,10,12, 19, 0), 64333],
[Date.UTC(2014,10,12, 20, 0), 61937],
[Date.UTC(2014,10,12, 21, 0), 63622],
[Date.UTC(2014,10,12, 22, 0), 61360],
[Date.UTC(2014,10,12, 23, 0), 56693],
[Date.UTC(2014,10,13, 0, 0), 52152],
[Date.UTC(2014,10,13, 1, 0), 54164],
[Date.UTC(2014,10,13, 2, 0), 46321],
[Date.UTC(2014,10,13, 3, 0), 45620],
[Date.UTC(2014,10,13, 4, 0), 45646],
[Date.UTC(2014,10,13, 5, 0), 45568],
[Date.UTC(2014,10,13, 6, 0), 30890],
[Date.UTC(2014,10,13, 7, 0), 39329],
[Date.UTC(2014,10,13, 8, 0), 46179],
[Date.UTC(2014,10,13, 9, 0), 44268],
[Date.UTC(2014,10,13, 10, 0), 61705],
[Date.UTC(2014,10,13, 11, 0), 51566],
[Date.UTC(2014,10,13, 12, 0), 60420],
[Date.UTC(2014,10,13, 13, 0), 61674],
[Date.UTC(2014,10,13, 14, 0), 61817],
[Date.UTC(2014,10,13, 15, 0), 63504],
[Date.UTC(2014,10,13, 16, 0), 58999],
[Date.UTC(2014,10,13, 17, 0), 57214],
[Date.UTC(2014,10,13, 18, 0), 60121],
[Date.UTC(2014,10,13, 19, 0), 59749],
[Date.UTC(2014,10,13, 20, 0), 59571],
[Date.UTC(2014,10,13, 21, 0), 52438],
[Date.UTC(2014,10,13, 22, 0), 61843],
[Date.UTC(2014,10,13, 23, 0), 55733],
[Date.UTC(2014,10,14, 0, 0), 55099],
[Date.UTC(2014,10,14, 1, 0), 44502],
[Date.UTC(2014,10,14, 2, 0), 46755],
[Date.UTC(2014,10,14, 3, 0), 44625],
[Date.UTC(2014,10,14, 4, 0), 43113],
[Date.UTC(2014,10,14, 5, 0), 46011],
[Date.UTC(2014,10,14, 6, 0), 45463],
[Date.UTC(2014,10,14, 7, 0), 52228],
[Date.UTC(2014,10,14, 8, 0), 43481],
[Date.UTC(2014,10,14, 9, 0), 53750],
[Date.UTC(2014,10,14, 10, 0), 53618],
[Date.UTC(2014,10,14, 11, 0), 54726],
[Date.UTC(2014,10,14, 12, 0), 59496],
[Date.UTC(2014,10,14, 13, 0), 61958],
[Date.UTC(2014,10,14, 14, 0), 55828],
[Date.UTC(2014,10,14, 15, 0), 62818],
[Date.UTC(2014,10,14, 16, 0), 59388],
[Date.UTC(2014,10,14, 17, 0), 61562],
[Date.UTC(2014,10,14, 18, 0), 60652],
[Date.UTC(2014,10,14, 19, 0), 57677],
[Date.UTC(2014,10,14, 20, 0), 58185],
[Date.UTC(2014,10,14, 21, 0), 59622],
[Date.UTC(2014,10,14, 22, 0), 51659],
[Date.UTC(2014,10,14, 23, 0), 51320],
[Date.UTC(2014,10,15, 0, 0), 45854],
[Date.UTC(2014,10,15, 1, 0), 47269],
[Date.UTC(2014,10,15, 2, 0), 43180],
[Date.UTC(2014,10,15, 3, 0), 41302],
[Date.UTC(2014,10,15, 4, 0), 43015],
[Date.UTC(2014,10,15, 5, 0), 40329],
[Date.UTC(2014,10,15, 6, 0), 40992],
[Date.UTC(2014,10,15, 7, 0), 45368],
[Date.UTC(2014,10,15, 8, 0), 47679],
[Date.UTC(2014,10,15, 9, 0), 45856],
[Date.UTC(2014,10,15, 10, 0), 40170],
[Date.UTC(2014,10,15, 11, 0), 33503],
[Date.UTC(2014,10,15, 12, 0), 35881],
[Date.UTC(2014,10,15, 13, 0), 41414],
[Date.UTC(2014,10,15, 14, 0), 38983],
[Date.UTC(2014,10,15, 15, 0), 45704],
[Date.UTC(2014,10,15, 16, 0), 49468],
[Date.UTC(2014,10,15, 17, 0), 47641],
[Date.UTC(2014,10,15, 18, 0), 48703],
[Date.UTC(2014,10,15, 19, 0), 42255],
[Date.UTC(2014,10,15, 20, 0), 43649],
[Date.UTC(2014,10,15, 21, 0), 43003],
[Date.UTC(2014,10,15, 22, 0), 42210],
[Date.UTC(2014,10,15, 23, 0), 41946],
[Date.UTC(2014,10,16, 0, 0), 39678],
[Date.UTC(2014,10,16, 1, 0), 40341],
[Date.UTC(2014,10,16, 2, 0), 40906],
[Date.UTC(2014,10,16, 3, 0), 44585],
[Date.UTC(2014,10,16, 4, 0), 47818],
[Date.UTC(2014,10,16, 5, 0), 43351],
[Date.UTC(2014,10,16, 6, 0), 46821],
[Date.UTC(2014,10,16, 7, 0), 55088],
[Date.UTC(2014,10,16, 8, 0), 53736],
[Date.UTC(2014,10,16, 9, 0), 47168],
[Date.UTC(2014,10,16, 10, 0), 40686],
[Date.UTC(2014,10,16, 11, 0), 41341],
[Date.UTC(2014,10,16, 12, 0), 38287],
[Date.UTC(2014,10,16, 13, 0), 42382],
[Date.UTC(2014,10,16, 14, 0), 42707],
[Date.UTC(2014,10,16, 15, 0), 48685],
[Date.UTC(2014,10,16, 16, 0), 52091],
[Date.UTC(2014,10,16, 17, 0), 50305],
[Date.UTC(2014,10,16, 18, 0), 49768],
[Date.UTC(2014,10,16, 19, 0), 47123],
[Date.UTC(2014,10,16, 20, 0), 46650],
[Date.UTC(2014,10,16, 21, 0), 48266],
[Date.UTC(2014,10,16, 22, 0), 45569],
[Date.UTC(2014,10,16, 23, 0), 46020]
            ]
        }, {
            name: 'Week 1',
            data: [
[Date.UTC(2014,10,3, 2, 0), 53020],
[Date.UTC(2014,10,3, 3, 0), 57558],
[Date.UTC(2014,10,3, 4, 0), 53483],
[Date.UTC(2014,10,3, 5, 0), 50456],
[Date.UTC(2014,10,3, 6, 0), 52947],
[Date.UTC(2014,10,3, 7, 0), 54277],
[Date.UTC(2014,10,3, 8, 0), 50552],
[Date.UTC(2014,10,3, 9, 0), 50149],
[Date.UTC(2014,10,3, 10, 0), 50029],
[Date.UTC(2014,10,3, 11, 0), 38256],
[Date.UTC(2014,10,3, 12, 0), 40337],
[Date.UTC(2014,10,3, 13, 0), 46189],
[Date.UTC(2014,10,3, 14, 0), 51514],
[Date.UTC(2014,10,3, 15, 0), 63219],
[Date.UTC(2014,10,3, 16, 0), 64591],
[Date.UTC(2014,10,3, 17, 0), 61393],
[Date.UTC(2014,10,3, 18, 0), 67817],
[Date.UTC(2014,10,3, 19, 0), 61386],
[Date.UTC(2014,10,3, 20, 0), 65867],
[Date.UTC(2014,10,3, 21, 0), 66574],
[Date.UTC(2014,10,3, 22, 0), 60382],
[Date.UTC(2014,10,3, 23, 0), 60641],
[Date.UTC(2014,10,4, 0, 0), 55247],
[Date.UTC(2014,10,4, 1, 0), 52419],
[Date.UTC(2014,10,4, 2, 0), 46820],
[Date.UTC(2014,10,4, 3, 0), 47222],
[Date.UTC(2014,10,4, 4, 0), 47778],
[Date.UTC(2014,10,4, 5, 0), 39777],
[Date.UTC(2014,10,4, 6, 0), 37317],
[Date.UTC(2014,10,4, 7, 0), 41976],
[Date.UTC(2014,10,4, 8, 0), 19841],
[Date.UTC(2014,10,4, 10, 0), 23208],
[Date.UTC(2014,10,4, 11, 0), 36980],
[Date.UTC(2014,10,4, 12, 0), 35626],
[Date.UTC(2014,10,4, 13, 0), 45458],
[Date.UTC(2014,10,4, 14, 0), 48027],
[Date.UTC(2014,10,4, 15, 0), 55338],
[Date.UTC(2014,10,4, 16, 0), 59092],
[Date.UTC(2014,10,4, 17, 0), 58828],
[Date.UTC(2014,10,4, 18, 0), 62777],
[Date.UTC(2014,10,4, 19, 0), 62305],
[Date.UTC(2014,10,4, 20, 0), 60229],
[Date.UTC(2014,10,4, 21, 0), 61429],
[Date.UTC(2014,10,4, 22, 0), 60956],
[Date.UTC(2014,10,4, 23, 0), 53670],
[Date.UTC(2014,10,5, 0, 0), 48931],
[Date.UTC(2014,10,5, 1, 0), 45128],
[Date.UTC(2014,10,5, 2, 0), 45236],
[Date.UTC(2014,10,5, 3, 0), 43054],
[Date.UTC(2014,10,5, 4, 0), 44808],
[Date.UTC(2014,10,5, 5, 0), 37853],
[Date.UTC(2014,10,5, 6, 0), 34829],
[Date.UTC(2014,10,5, 7, 0), 36154],
[Date.UTC(2014,10,5, 8, 0), 31080],
[Date.UTC(2014,10,5, 9, 0), 31078],
[Date.UTC(2014,10,5, 10, 0), 30199],
[Date.UTC(2014,10,5, 11, 0), 34023],
[Date.UTC(2014,10,5, 12, 0), 33804],
[Date.UTC(2014,10,5, 13, 0), 43782],
[Date.UTC(2014,10,5, 14, 0), 48781],
[Date.UTC(2014,10,5, 15, 0), 59048],
[Date.UTC(2014,10,5, 16, 0), 65561],
[Date.UTC(2014,10,5, 17, 0), 62576],
[Date.UTC(2014,10,5, 18, 0), 61725],
[Date.UTC(2014,10,5, 19, 0), 25043],
[Date.UTC(2014,10,5, 20, 0), 56228],
[Date.UTC(2014,10,5, 21, 0), 62749],
[Date.UTC(2014,10,5, 22, 0), 29101],
[Date.UTC(2014,10,5, 23, 0), 54742],
[Date.UTC(2014,10,6, 0, 0), 21550],
[Date.UTC(2014,10,6, 2, 0), 31888],
[Date.UTC(2014,10,6, 3, 0), 44782],
[Date.UTC(2014,10,6, 4, 0), 46152],
[Date.UTC(2014,10,6, 5, 0), 42653],
[Date.UTC(2014,10,6, 6, 0), 38985],
[Date.UTC(2014,10,6, 7, 0), 35073],
[Date.UTC(2014,10,6, 8, 0), 33484],
[Date.UTC(2014,10,6, 9, 0), 33029],
[Date.UTC(2014,10,6, 10, 0), 34496],
[Date.UTC(2014,10,6, 11, 0), 31740],
[Date.UTC(2014,10,6, 12, 0), 34367],
[Date.UTC(2014,10,6, 13, 0), 39546],
[Date.UTC(2014,10,6, 14, 0), 4129],
[Date.UTC(2014,10,6, 15, 0), 4183],
[Date.UTC(2014,10,6, 16, 0), 154024],
[Date.UTC(2014,10,6, 17, 0), 78791],
[Date.UTC(2014,10,6, 18, 0), 61385],
[Date.UTC(2014,10,6, 19, 0), 60317],
[Date.UTC(2014,10,6, 20, 0), 56243],
[Date.UTC(2014,10,6, 21, 0), 46905],
[Date.UTC(2014,10,6, 22, 0), 48009],
[Date.UTC(2014,10,6, 23, 0), 43111],
[Date.UTC(2014,10,7, 0, 0), 50466],
[Date.UTC(2014,10,7, 1, 0), 46026],
[Date.UTC(2014,10,7, 2, 0), 44108],
[Date.UTC(2014,10,7, 3, 0), 51097],
[Date.UTC(2014,10,7, 4, 0), 47623],
[Date.UTC(2014,10,7, 5, 0), 44577],
[Date.UTC(2014,10,7, 6, 0), 39814],
[Date.UTC(2014,10,7, 7, 0), 45559],
[Date.UTC(2014,10,7, 8, 0), 41463],
[Date.UTC(2014,10,7, 9, 0), 37101],
[Date.UTC(2014,10,7, 10, 0), 44765],
[Date.UTC(2014,10,7, 11, 0), 37454],
[Date.UTC(2014,10,7, 12, 0), 34127],
[Date.UTC(2014,10,7, 13, 0), 41724],
[Date.UTC(2014,10,7, 14, 0), 44243],
[Date.UTC(2014,10,7, 15, 0), 58201],
[Date.UTC(2014,10,7, 16, 0), 56800],
[Date.UTC(2014,10,7, 17, 0), 49824],
[Date.UTC(2014,10,7, 18, 0), 50697],
[Date.UTC(2014,10,7, 19, 0), 53845],
[Date.UTC(2014,10,7, 20, 0), 53400],
[Date.UTC(2014,10,7, 21, 0), 51996],
[Date.UTC(2014,10,7, 22, 0), 50165],
[Date.UTC(2014,10,7, 23, 0), 45911],
[Date.UTC(2014,10,8, 0, 0), 45809],
[Date.UTC(2014,10,8, 1, 0), 43477],
[Date.UTC(2014,10,8, 2, 0), 41482],
[Date.UTC(2014,10,8, 3, 0), 42656],
[Date.UTC(2014,10,8, 4, 0), 49696],
[Date.UTC(2014,10,8, 5, 0), 44321],
[Date.UTC(2014,10,8, 6, 0), 47014],
[Date.UTC(2014,10,8, 7, 0), 49325],
[Date.UTC(2014,10,8, 8, 0), 50707],
[Date.UTC(2014,10,8, 9, 0), 47120],
[Date.UTC(2014,10,8, 10, 0), 44264],
[Date.UTC(2014,10,8, 11, 0), 42654],
[Date.UTC(2014,10,8, 12, 0), 34013],
[Date.UTC(2014,10,8, 13, 0), 37372],
[Date.UTC(2014,10,8, 14, 0), 37154],
[Date.UTC(2014,10,8, 15, 0), 42989],
[Date.UTC(2014,10,8, 16, 0), 41321],
[Date.UTC(2014,10,8, 17, 0), 44484],
[Date.UTC(2014,10,8, 18, 0), 44034],
[Date.UTC(2014,10,8, 19, 0), 40078],
[Date.UTC(2014,10,8, 20, 0), 44519],
[Date.UTC(2014,10,8, 21, 0), 41220],
[Date.UTC(2014,10,8, 22, 0), 39099],
[Date.UTC(2014,10,8, 23, 0), 37623],
[Date.UTC(2014,10,9, 0, 0), 35041],
[Date.UTC(2014,10,9, 1, 0), 39487],
[Date.UTC(2014,10,9, 2, 0), 40021],
[Date.UTC(2014,10,9, 3, 0), 41839],
[Date.UTC(2014,10,9, 4, 0), 48353],
[Date.UTC(2014,10,9, 5, 0), 45634],
[Date.UTC(2014,10,9, 6, 0), 46186],
[Date.UTC(2014,10,9, 7, 0), 53886],
[Date.UTC(2014,10,9, 8, 0), 50310],
[Date.UTC(2014,10,9, 9, 0), 52427],
[Date.UTC(2014,10,9, 10, 0), 39577],
[Date.UTC(2014,10,9, 11, 0), 32065],
[Date.UTC(2014,10,9, 12, 0), 33556],
[Date.UTC(2014,10,9, 13, 0), 34517],
[Date.UTC(2014,10,9, 14, 0), 37020],
[Date.UTC(2014,10,9, 15, 0), 44379],
[Date.UTC(2014,10,9, 16, 0), 45299],
[Date.UTC(2014,10,9, 17, 0), 44438],
[Date.UTC(2014,10,9, 18, 0), 45157],
[Date.UTC(2014,10,9, 19, 0), 41829],
[Date.UTC(2014,10,9, 20, 0), 42198],
[Date.UTC(2014,10,9, 21, 0), 328],
[Date.UTC(2014,10,9, 23, 0), 28]
            ]
        }]
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

＆＃13;

以下是完整代码：http://jsfiddle.net/8yngc3a0/

发生的事情是两个系列彼此相邻。我希望根据一周的日期超级强加。知道怎么做吗？

Answer 1

我能找到的最简单的方法是定义第二个xAxis，但将其绘制在第一个xAxis上。然后将第二个系列分配给第二个xAxis：

 xAxis: [{
        type: 'datetime',
        labels: {
            formatter : function () {
                var d= new Date(this.value);
                return d.getDay();
            }
        },
        title: {
            text: 'Day of the week'
        }
    },{
        type: 'datetime',
        offset:0,
        labels: {
            formatter : function () {
                var d= new Date(this.value);
                return d.getDay();
            }
        },
        title: {
            text: 'Day of the week'
        }
    }],


    series: [{
        xAxis:1,
        name: 'Week 2',

http://jsfiddle.net/4Lcmaxe5/

但是，如果是我，我会重新定义数据系列以使用类别而不是日期时间轴。您必须根据星期几和时间定义类别名称列表，并且数据中只包含y值。这仅适用于您的日期时间数据没有间隙的情况。

如何比较每周数据？

1 个答案: