Charts 拖动数据点并提交值

第页有一个在jqPlot图表上拖动数据点的示例

---

如何向服务器提交（例如使用jQuery ajax）更改的值？更改的（当前）值是否存储在jqplot对象的某个位置？

这里最困难的事情是知道用户何时拖动一个点，而不是之后获取数据。我建议您使用postDrawSeries挂钩，如下所示：

$(document).ready(function () {

  // set up plot
  $.jqplot.config.enablePlugins = true;

  s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];

  plot1 = $.jqplot('chart1',[s1],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         sizeAdjust: 10,
         tooltipLocation: 'n',
         tooltipAxes: 'y',
         tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
         useAxesFormatters: false
     },
     cursor: {
         show: true
     }
  });

  // add our hook, to fire after a series update
  $.jqplot.postDrawSeriesHooks.push(updatedSeries);

  function updatedSeries(sctx, options) {
    console.log(plot1.series[0].data); //data for the series is here
  }

});

（您必须在浏览器中缓存jqPlot js文件，因为它们不允许热链接。）

---

由于postdrawseries钩子在每次拖动事件中都会触发，因此在调用ajax之前，您必须实现某种计时器以等待5秒钟左右。不过，这应该不会太难。

postDrawSeriesHooks的问题在于，它在您单击图形的整个过程中都会运行。如果您正在进行ajax调用，这可能会是一个真正的混乱。我会将jqplotClick事件绑定到您的图表。您甚至可以到达特定点，或者每次都可以保存所有数据。但每次单击只会保存一次

$("#chart1").on("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    if ( neighbor ) {
        // specific point that has been clicked
        console.log('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
    // all the data from this plot's single series
    console.log(plot1.series[0].data);
});

这里有一个多个图形的示例，它在每次单击时对php文件进行ajax调用，并存储两个图形中的所有数据点。但这只允许每个绘图使用单个系列

var plots = [
    $.jqplot('chart1', [s0], graph_opts),
    $.jqplot('chart2', [s1], graph_opts)
];
$("#chart1, #chart2").on("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    var data = [];
    $.each(plots, function(key, plot) {
        data[key] = plot.series[0].data;
    });

    var ajax_opts = {
        url:      ajax_info.url,
        type:     'post',
        async:    true,
        cache:    false,
        dataType: 'json',
        data: {
            action:  'store_graphs',
            data:    data
        },
        success: function( response ) {
            console.log(response);
        },
        error: function( xhr, textStatus, e ) {
            console.log(xhr.responseText);
        }
    };
    $.ajax(ajax_opts);
});

---

这个答案确实帮助了我们

我注意到还有另一个钩子，jqplotDragStop

因此，通过使用它，我们可以在每次拖动停止时调用ajax。这正是我们要找的

$('#chart1').bind('jqplotDragStop',
  function (seriesIndex, pointIndex, pixelposition, data) {
  // do your stuff here
}); 

---

希望这有帮助（很抱歉，无法找到如何添加评论，stackoverflow新增内容）。

非常好！我测试了它（），我只有一个问题。用户是否可能只能在y轴上拖动某个点（重要的是，他不应该将数据点从一个日期移动到另一个日期，他只能更改值）@TOUDIdel，这实际上是选项之一：（请参见constrainTo）

$('#chart1').bind('jqplotDragStop',
  function (seriesIndex, pointIndex, pixelposition, data) {
  // do your stuff here
});