个人中心
gpt4 book ai didi

javascript - Flot 在堆栈条形图缩放后返回不正确的 x 值(mm/dd/yy - 日期)

转载 作者：行者123 更新时间：2023-11-29 22:03:41 25 4
gpt4 key购买 nike

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

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

我是 float 图表的新手。请帮我。谢谢。

[<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

最佳答案

问题是这行代码:

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");

编辑

不是在缩放时再次调用 .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();

关于javascript - Flot 在堆栈条形图缩放后返回不正确的 x 值(mm/dd/yy - 日期)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22178201/

25 4 0
文章推荐： javascript - 使用 JavaScript 检查 iCheck 复选框？
文章推荐： javascript - 如何使用 Meteor 进行账户录入？
文章推荐： javascript - D3 TSV 列访问
文章推荐： javascript - 使用带间隙的箭头水平滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com