Question

我想在用户缩放图表并点击特定栏时获得正确的x轴标签

单击（02/14/14 - xaxis）上的栏时，警报显示（02/19/14 - xaxis）标签。当缩放（选择）未触发时，它返回正确的日期。但在缩放图表并单击栏后，它会填充错误的日期。

我是flot排行榜的新手。请帮我。谢谢。

[<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Stack Zoom Click</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="plot.css" rel="stylesheet" type="text/css">
    <link href="master.css" rel="stylesheet" type="text/css">
    <!--\[if lte IE 8\]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><!\[endif\]-->
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.valuelabels.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.selection.js"></script>


    <script type="text/javascript">

    $(function() {

    var dataset = \[{
        data: \[
            \[1391279400000, -588\],\[1391365800000, -1324\],\[1391452200000, -1525\],\[1391538600000, -588\],\[1391625000000, -1525\],\[1391711400000, -588\],
            \[1391797800000, -1324\],\[1391884200000, -1525\],\[1391970600000, -588\],\[1392057000000, -1234\],\[1392143400000, -588\],\[1392229800000, -1324\],
            \[1392316200000, -1525\],\[1392402600000, -588\],\[1392489000000, -1525\],\[1392575400000, -588\],\[1392661800000, -1324\],\[1392748200000, -1525\],
            \[1392834600000, -588\]
        \],
        color:'#9D538E',
        label: "Out"
    },
    {
        data: \[
            \[1391279400000, 3221\],\[1391365800000, 2496\],\[1391452200000, 1050\],\[1391538600000, 3221\],\[1391625000000, 1050\],\[1391711400000, 3221\],
            \[1391797800000, 2496\],\[1391884200000, 1050\],\[1391970600000, 2221\],\[1392057000000, 1050\],\[1392143400000, 3221\],\[1392229800000, 2496\],
            \[1392316200000, 1050\],\[1392402600000, 3221\],\[1392489000000, 1050\],\[1392575400000, 3221\],\[1392661800000, 2496\],\[1392748200000, 1050\],
            \[1392834600000, 2221\]
        \],
        color:'#702BD7',
        label: "Intake"
    }, {
        data: \[
            \[1391279400000, 1000\],\[1391365800000, -1000\],\[1391452200000, -475\],\[1391538600000, 1000\],\[1391625000000, -475\],\[1391711400000, 1000\],
            \[1391797800000, -1000\],\[1391884200000, -475\],\[1391970600000, 1000\],\[1392057000000, -475\],\[1392143400000, 1000\],\[1392229800000, -1000\],
            \[1392316200000, -475\],\[1392402600000, 1000\],\[1392489000000, -475\],\[1392575400000, 1000\],\[1392661800000, -1000\],\[1392748200000, -475\],
            \[1392834600000, 1000\]
        \],
        color:'#2082F2',
        label: "Net"
    }\];    

            var plot = $.plot("#placeholder", dataset, {
                xaxis: {
                        mode: 'time',
                        timeformat: "%m/%d/%y",
                        tickSize: \[1, "day"\], 
                }, 
                series: {
                        bars: {
                            fill: 1,
                            show: true,     
                            barWidth: 100*100*4000,
                        },
                        valueLabels: { 
                            show: true,
                            showAsHtml: true,                   
                        },                  
                }, 
                grid: {
                        hoverable: true,
                        clickable: true,
                        borderWidth: 2,       
                        markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
                        backgroundColor: { colors: \["#000000", "#000000"\] }
                }               
            });

            var overview = $.plot("#overview", dataset, {
                xaxis: {
                        mode: 'time',   
                        ticks: \[\]             
                }, 
                yaxis: {
                        ticks: \[\],
                },
                series: {
                        bars: {
                            fill: 1,
                            show: true,                     
                        },              
                }, 
                grid: {
                        markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
                        backgroundColor: { colors: \["#000000", "#000000"\] }
                },
                selection: {
                        mode: "x"
                },
                legend: {show: false}
            }); 

                // now connect the two
                $("#placeholder").bind("plotselected", function (event, ranges) {

                        //Reset Chart resolution dropdown
                        $(".chartResolution").val("0");


                        // do the zooming
                        plot = $.plot("#placeholder", dataset, {
                            xaxis: {
                                mode: 'time',       
                                min: ranges.xaxis.from,
                                max: ranges.xaxis.to,
                            }, 
                            series: {
                                bars: {
                                    fill: 1,
                                    show: true,                     
                                    barWidth: 100*100*4000,
                                },
                                valueLabels: { 
                                    show: true,
                                    showAsHtml: true,                   
                                },                  
                            }, 
                            grid: {
                                hoverable: true,
                                clickable: true,
                                borderWidth: 2,       
                                markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
                                backgroundColor: { colors: \["#000000", "#000000"\] }
                            }
                        });


                        // don't fire event on the overview to prevent eternal loop
                        //overview.setSelection(ranges, true);

                });



                //bind the plotselected function

                $("#overview").bind("plotselected", function (event, ranges) {          
                                plot.setSelection(ranges);
                });

        $("#placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                var tickClicked = item.series.xaxis.ticks\[item.dataIndex+1\].label;         
                alert(tickClicked);
            }
        });

    });
    </script>
</head>
<body style="background-color:#222222; color:white;">

    <div id="content">
        <div class="demo-container" style="margin-top:1%;">
            <div id="placeholder" class="demo-placeholder"></div>
            <p class="notifyMessage">Please click and drag and select a range to zoom <a href="#" title="Revert to all data" class="buttonCommon revertToAll">Revert to all data</a></p>
            <div id="overview" class="psycho" style="width:950px;height:150px;"></div>
        </div>

    </div>

</body>
</html>][1]

enter image description here

Answer 1

问题在于这行代码：

var tickClicked = item.series.xaxis.ticks[item.dataIndex+1].label;

当你的情节没有被解开时，每个数据点（条形）有一个刻度。但是，当你缩放时，你最终得到的是滴答，所以找到item.dataIndex的勾号是行不通的。

我猜你更关心与栏相关的数据（而不是真正的勾号）所以得到栏x值并将其格式化回日期字符串。

var tickClicked = $.plot.formatDate(new Date(item.datapoint[0]),"%m/%d/%Y");

<强> EDITS

而不是在缩放上进行另一次.plot调用重绘图表（这是我在使用flot的应用程序中执行此操作）：

var opts = plot.getOptions();
opts.xaxes[0].min = ranges.xaxis.from;
opts.xaxes[0].max = ranges.xaxis.to;
opts.yaxes[0].min = ranges.yaxis.from;
opts.yaxes[0].max = ranges.yaxis.to;
plot.setupGrid();
plot.draw();

在缩放堆栈条形图后，Flot返回不正确的x值（mm / dd / yy - date）

我想在用户缩放图表并点击特定栏时获得正确的x轴标签

1 个答案: