获取ajax数据后重新加载nvd3图表

时间:2015-04-07 02:50:56

标签: javascript ajax charts nvd3.js

我使用nvd3绘制条形图,其中数据来自ajax请求。

当我点击按钮时,它会执行ajax请求并发送图表的新数据。

请求正常,我从ajax正确获取数据,唯一的问题是图表没有重新加载。

我尝试这样做:

<script type='text/javascript'>
var chart;
var data = [{key: 'A', values: [{'label' : '2014' , 'value' : 9}....;
nv.addGraph(function () {
   if (chart) {
      chart.remove();
   }
   chart = nv.models.multiBarChart()
           .x(function (d) { return d.label })
           .y(function (d) { return d.value })
   chart.yAxis
            .tickFormat(d3.format(',.2f'));
   d3.select('#chart1 svg')
            .datum(data)
            .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
  });

  function test() {
       value = 2;
       $.ajax({
              type: "POST",
              url: "index.aspx/Getval",
              data: '{val: "' + value + '" }',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (response) {
                       keyValue = response.d;
                       alert(keyValue); // show [{key: 'A', values: [{'label' : '2014' , 'value' : 9}....
                       data = keyValue;
                       $("#chart1 svg").empty();
                       chart.update();
                       }
              });
           }
 </script>
 <input type="button" onclick="javascript: test();" value="test"/>
 <div id="chart1">
 <svg></svg>                                    
 </div> 

知道为什么我无法更新图表?感谢

0 个答案:

没有答案