charts - Draggind 数据点和提交值

Question

在页面 jqPlot在 jqPlot 图表上有一个拖动数据点的例子。

我如何提交(例如使用 jQuery ajax)到服务器更改的值？更改的(当前)值是否存储在 jqplot 对象中的某处？

Answer 1

这里最难的事情是知道用户何时拖动一个点，而不是之后获取数据。我建议您像这样使用 postDrawSeries Hook :

$(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
  }

});

每次拖动的输出是(包含更新的数据点):

[
Array[2]
, 
Array[2]
, 
Array[2]
, 
Array[2]
]

Here's an example. (您必须在浏览器中缓存 jqPlot js 文件，因为它们不允许热链接。)

在调用 ajax 之前，您必须实现某种计时器来等待 5 秒左右，因为 postdrawseries Hook 会在每次拖动事件时触发。不过，这应该不会太难。