Javascript jQuery Flot图表：“；卷轴；月

我在jqueryflot中有一个图表，其中包含每个月的数据，即x轴表示一个月的天数。为了便于使用，我只代表了一个与您类似的示例，只需查看顶部第五个示例（红色框中的一个）：

此类图形的代码如下所示：

function chart2() {
    function randValue() {
        return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
    }
    var pageviews = [
        [1, randValue()],
        [2, randValue()],
        [3, 2 + randValue()],
        [4, 3 + randValue()],
        [5, 5 + randValue()],
        [6, 10 + randValue()],
        [7, 15 + randValue()],
        [8, 20 + randValue()],
        [9, 25 + randValue()],
        [10, 30 + randValue()],
        [11, 35 + randValue()],
        [12, 25 + randValue()],
        [13, 15 + randValue()],
        [14, 20 + randValue()],
        [15, 45 + randValue()],
        [16, 50 + randValue()],
        [17, 65 + randValue()],
        [18, 70 + randValue()],
        [19, 85 + randValue()],
        [20, 80 + randValue()],
        [21, 75 + randValue()],
        [22, 80 + randValue()],
        [23, 75 + randValue()],
        [24, 70 + randValue()],
        [25, 65 + randValue()],
        [26, 75 + randValue()],
        [27, 80 + randValue()],
        [28, 85 + randValue()],
        [29, 90 + randValue()],
        [30, 95 + randValue()]
    ];
    var visitors = [
        [1, randValue() - 5],
        [2, randValue() - 5],
        [3, randValue() - 5],
        [4, 6 + randValue()],
        [5, 5 + randValue()],
        [6, 20 + randValue()],
        [7, 25 + randValue()],
        [8, 36 + randValue()],
        [9, 26 + randValue()],
        [10, 38 + randValue()],
        [11, 39 + randValue()],
        [12, 50 + randValue()],
        [13, 51 + randValue()],
        [14, 12 + randValue()],
        [15, 13 + randValue()],
        [16, 14 + randValue()],
        [17, 15 + randValue()],
        [18, 15 + randValue()],
        [19, 16 + randValue()],
        [20, 17 + randValue()],
        [21, 18 + randValue()],
        [22, 19 + randValue()],
        [23, 20 + randValue()],
        [24, 21 + randValue()],
        [25, 14 + randValue()],
        [26, 24 + randValue()],
        [27, 25 + randValue()],
        [28, 26 + randValue()],
        [29, 27 + randValue()],
        [30, 31 + randValue()]
    ];

    var plot = $.plot($("#chart_2"), [{
                data: pageviews,
                label: "Unique Visits",
                lines: {
                    lineWidth: 1,
                },
                shadowSize: 0

            }, {
                data: visitors,
                label: "Page Views",
                lines: {
                    lineWidth: 1,
                },
                shadowSize: 0
            }
        ], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: {
                        colors: [{
                                opacity: 0.05
                            }, {
                                opacity: 0.01
                            }
                        ]
                    }
                },
                points: {
                    show: true,
                    radius: 3,
                    lineWidth: 1
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#eee",
                borderColor: "#eee",
                borderWidth: 1
            },
            colors: ["#d12610", "#37b7f3", "#52e136"],
            xaxis: {
                ticks: 11,
                tickDecimals: 0,
                tickColor: "#eee",
            },
            yaxis: {
                ticks: 11,
                tickDecimals: 0,
                tickColor: "#eee",
            }
        });


    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 15,
                border: '1px solid #333',
                padding: '4px',
                color: '#fff',
                'border-radius': '3px',
                'background-color': '#333',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#chart_2").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
}

函数图2（）{
函数值（）{
返回值（Math.floor（Math.random（）*（1+40-20））+20；
}
var页面浏览量=[
[1，randValue（）]，
[2，randValue（）]，
[3,2+randValue（）]，
[4,3+randValue（）]，
[5,5+randValue（）]，
[6,10+randValue（）]，
[7,15+randValue（）]，
[8,20+randValue（）]，
[9,25+randValue（）]，
[10,30+randValue（）]，
[11,35+randValue（）]，
[12,25+randValue（）]，
[13,15+randValue（）]，
[14,20+randValue（）]，
[15,45+randValue（）]，
[16,50+randValue（）]，
[17,65+randValue（）]，
[18,70+randValue（）]，
[19,85+randValue（），
[20,80+randValue（）]，
[21,75+randValue（）]，
[22,80+randValue（）]，
[23,75+randValue（），
[24,70+randValue（）]，
[25,65+randValue（）]，
[26,75+randValue（）]，
[27,80+randValue（）]，
[28,85+randValue（），
[29,90+randValue（）]，
[30,95+randValue（）]
];
var访客=[
[1，randValue（）-5]，
[2，randValue（）-5]，
[3，randValue（）-5]，
[4,6+randValue（）]，
[5,5+randValue（）]，
[6,20+randValue（）]，
[7,25+randValue（）]，
[8,36+randValue（）]，
[9,26+randValue（）]，
[10,38+randValue（），
[11,39+randValue（）]，
[12,50+randValue（）]，
[13,51+randValue（）]，
[14,12+randValue（）]，
[15,13+randValue（）]，
[16,14+randValue（）]，
[17,15+randValue（）]，
[18,15+randValue（）]，
[19,16+randValue（）]，
[20,17+randValue（）]，
[21,18+randValue（）]，
[22,19+randValue（）]，
[23,20+randValue（）]，
[24,21+randValue（）]，
[25,14+randValue（）]，
[26,24+randValue（）]，
[27,25+randValue（）]，
[28,26+randValue（）]，
[29,27+randValue（）]，
[30,31+randValue（）]
];
变量图=$.plot（$（“#图2”）[{
数据：页面浏览量，
标签：“独特访问”，
线路：{
线宽：1，
},
阴影大小：0
}, {
数据：访客，
标签：“页面浏览量”，
线路：{
线宽：1，
},
阴影大小：0
}
], {
系列：{
线路：{
秀：没错，
线宽：2，
填充：是的，
填充颜色：{
颜色：[{
不透明度：0.05
}, {
不透明度：0.01
}
]
}
},
要点：{
秀：没错，
半径：3，
线宽：1
},
阴影大小：2
},
网格：{
悬停：是的，
可点击：正确，
勾选颜色：“#eee”，
边框颜色：“eee”，
边框宽度：1
},
颜色：[“d12610”、“37b7f3”、“52e136”]，
xaxis：{
滴答声：11，
小数点：0，
勾选颜色：“#eee”，
},
亚克斯：{
滴答声：11，
小数点：0，
勾选颜色：“#eee”，
}
});
函数显示工具提示（x、y、内容）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
左：x+15，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}
var-previousPoint=null；
$（“图表2”）.bind（“绘图悬停”，函数（事件、位置、项目）{
$（“#x”）.text（pos.x.toFixed（2））；
$（“#y”）.text（pos.y.toFixed（2））；
如果（项目）{
if（上一个点！=item.dataIndex）{
previousPoint=item.dataIndex；
$（“#工具提示”）.remove（）；
var x=项。数据点[0]。固定（2），
y=item.datapoint[1].toFixed（2）；
显示工具提示（item.pageX、item.pageY、item.series.label+“of”+x+“=”+y）；
}
}否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
}

我想要实现的是这样的目标：

function chart2() {
    function randValue() {
        return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
    }
    var pageviews = [
        [1, randValue()],
        [2, randValue()],
        [3, 2 + randValue()],
        [4, 3 + randValue()],
        [5, 5 + randValue()],
        [6, 10 + randValue()],
        [7, 15 + randValue()],
        [8, 20 + randValue()],
        [9, 25 + randValue()],
        [10, 30 + randValue()],
        [11, 35 + randValue()],
        [12, 25 + randValue()],
        [13, 15 + randValue()],
        [14, 20 + randValue()],
        [15, 45 + randValue()],
        [16, 50 + randValue()],
        [17, 65 + randValue()],
        [18, 70 + randValue()],
        [19, 85 + randValue()],
        [20, 80 + randValue()],
        [21, 75 + randValue()],
        [22, 80 + randValue()],
        [23, 75 + randValue()],
        [24, 70 + randValue()],
        [25, 65 + randValue()],
        [26, 75 + randValue()],
        [27, 80 + randValue()],
        [28, 85 + randValue()],
        [29, 90 + randValue()],
        [30, 95 + randValue()]
    ];
    var visitors = [
        [1, randValue() - 5],
        [2, randValue() - 5],
        [3, randValue() - 5],
        [4, 6 + randValue()],
        [5, 5 + randValue()],
        [6, 20 + randValue()],
        [7, 25 + randValue()],
        [8, 36 + randValue()],
        [9, 26 + randValue()],
        [10, 38 + randValue()],
        [11, 39 + randValue()],
        [12, 50 + randValue()],
        [13, 51 + randValue()],
        [14, 12 + randValue()],
        [15, 13 + randValue()],
        [16, 14 + randValue()],
        [17, 15 + randValue()],
        [18, 15 + randValue()],
        [19, 16 + randValue()],
        [20, 17 + randValue()],
        [21, 18 + randValue()],
        [22, 19 + randValue()],
        [23, 20 + randValue()],
        [24, 21 + randValue()],
        [25, 14 + randValue()],
        [26, 24 + randValue()],
        [27, 25 + randValue()],
        [28, 26 + randValue()],
        [29, 27 + randValue()],
        [30, 31 + randValue()]
    ];

    var plot = $.plot($("#chart_2"), [{
                data: pageviews,
                label: "Unique Visits",
                lines: {
                    lineWidth: 1,
                },
                shadowSize: 0

            }, {
                data: visitors,
                label: "Page Views",
                lines: {
                    lineWidth: 1,
                },
                shadowSize: 0
            }
        ], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: {
                        colors: [{
                                opacity: 0.05
                            }, {
                                opacity: 0.01
                            }
                        ]
                    }
                },
                points: {
                    show: true,
                    radius: 3,
                    lineWidth: 1
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#eee",
                borderColor: "#eee",
                borderWidth: 1
            },
            colors: ["#d12610", "#37b7f3", "#52e136"],
            xaxis: {
                ticks: 11,
                tickDecimals: 0,
                tickColor: "#eee",
            },
            yaxis: {
                ticks: 11,
                tickDecimals: 0,
                tickColor: "#eee",
            }
        });


    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 15,
                border: '1px solid #333',
                padding: '4px',
                color: '#fff',
                'border-radius': '3px',
                'background-color': '#333',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#chart_2").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
}

这意味着我想显示“滚动”月份的按钮，以便查看上个月和/或下个月的数据

---

用弗洛特能做到吗

基本上与本例相同：

---

绘制所有数据，然后将按钮与xaxis最小值和最大值绑定，以调整可见的窗口。

非常感谢，我不知道这个示例。非常好。是否可以平移/拖动图表以调整当前月份，而不是显示和调整按钮以更改月份@蒂姆看一下其他的例子。