2014-11-13 110 views
0

我正在與dimple js合作,我有一個折線圖代碼,但這裏是我設置事件的問題,只要點擊一個按鈕,圖表再次繪製,但chart.draw()沒有工作。問題出在哪裏幫助將不勝感激 HTML:更新折線圖

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
<button id="test">Click Me</button> 
<div id="chartContainer" class="chart_style"></div> 
</body> 
<script src="js/d3.js" charset="utf-8"></script> 
<script src="js/dimple.js"></script> 
<script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 600, 400), 
      data = [ 
       { "Value" : 10, "Year" : 2009 }, 
       { "Value" : 5, "Year" : 2010 }, 
       { "Value" : 4, "Year" : 2011 }, 
       { "Value" : 7, "Year" : 2012 }, 
       { "Value" : 10, "Year" : 2010 }, 
       { "Value" : 50, "Year" : 2020 }, 
       { "Value" : 40, "Year" : 2015 }, 
       { "Value" : 100, "Year" : 2014 }, 
       { "Value" : 200, "Year" : 2014 } 
      ]; 
    var chart = new dimple.chart(svg, data); 
    var x = chart.addCategoryAxis("x", "Year"); 
    x.addOrderRule("Year"); 
    var y = chart.addMeasureAxis("y", "Value"); 
    chart.addColorAxis("Value", ["green", "yellow", "red"]); 
    var lines = chart.addSeries(null, dimple.plot.line); 
    lines.lineWeight = 4; 
    lines.lineMarkers = true; 
    chart.ease = "bounce"; 
    chart.staggerDraw = true; 
    chart.draw(2000); 
    d3.select("#test").on("click", function() { 
    ///here is the problem 
     data = [ 
      { "Value" : 10, "Year" : 2009 }, 
      { "Value" : 5, "Year" : 2010 }, 
      { "Value" : 4, "Year" : 2011 }, 
      { "Value" : 50, "Year" : 2020 }, 
      { "Value" : 40, "Year" : 2015 }, 
      { "Value" : 120, "Year" : 2014 }, 
      { "Value" : 150, "Year" : 2011 }, 
      { "Value" : 500, "Year" : 2018 }, 
      { "Value" : 250, "Year" : 2015 }, 
      { "Value" : 200, "Year" : 2014 } 
     ]; 
     chart.draw(1000); 
    }); 
</script> 
</html> 

回答

1

您需要使用更新chart.data attribute更改與圖表相關的數據:

chart.data = [ ... ]; 

在代碼中,你重新分配data變量,沒有鏈接到酒窩圖。完整演示here