文章/答案/技术大牛

发布

社区首页 >问答首页 >jQplot可拖

问jQplot可拖
EN

Stack Overflow用户

提问于 2011-05-31 17:25:26

回答 1查看 2.2K关注 0票数 5

我在jQuery中使用了jQuery，并试图使这些要点具有可拖动性。通过jqplot.dragable插件具有此功能。

我应该说我是jQplot的新手，但我确实正确地绘制了我的信息。

我认为我正确地使用了可拖性选项。(使用该链接并找到'dragable:‘以查看一个示例)，但我的代码中肯定有错误。

这是我的密码。任何帮助都是非常感谢的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="javascript/jquery-1.5.2.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jqplot/plugins/jqplot.dragable.js"></script>

<style type="text/css">
.jqplot-axis {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%; 
}
.jqplot-highlighter-tooltip {
    background-color: #CCC;
    padding: 5px;
    border-radius: 5px;
}
</style>

<script language="javascript" type="text/javascript">
$(function() {
    <?php 
        $series = "";

        $start = strtotime("Jan 1 2001 00:00:00");
        $end = strtotime("Dec 31 2001 00:00:00");
        for ($i = $start; $i <= $end; $i += 432000) {
            if ($i > $start) {
                $series .= ", ";
            }
            $series .= "['" . date("m/d/Y", $i) . " 00:00:00', 2]";
        }
    ?>

    var series = [<?php echo $series; ?>];

    var plot1 = $.jqplot('Chart1', [series], {
        seriesDefaults: {

        },
        series: [
            { label: 'Importance' }
        ],
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: { formatString: '%b %e' },
                min: "12-27-2000 00:00:00",
                max: "12-31-2001 00:00:00",
                tickInterval: "15 days"
            },
            yaxis: {
                min: -10,
                max: 10
            }
        },
        highlighter: {
            show: true,
            showMarker: false,
            tooltipAxes: 'xy',
            formatString: '%s<br />%s'
        },
        dragable: {
            color: '#FF0000',
            constrainTo: 'none'
        }
    });

    var xaxis = $('.jqplot-axis.jqplot-xaxis div');
    xaxis.first().css('display', 'none');
    xaxis.last().css('display', 'none');
});
</script>
</head>

<body>
<div id='Chart1'></div>
</body>
</html>

javascript

jquery

charts

jqplot

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-06-01 15:29:33

我找到了答案。‘'dragable’不是jqplot对象底部的配置选项。“‘dragable”是“系列”中的一个配置选项。此外，该系列必须将“isDragable”设置为true。

这里是“串联”配置选项的修改代码。

series: [
    {
        label: 'Importance',
        dragable: {
            color: undefined,
            constrainTo: 'y'
        },
        isDragable: true
    }
],

参考文献：jqPlot选项教程

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6191200

复制

相似问题

问jQplot可拖
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQplot可拖EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQplot可拖
EN