用Knockout自動更新ChartJS數據綁定

我正在使用ChartJS的窗體。我想要做的是從字段中獲取值來繪製特定的圖表分段。我想使用Knockout數據綁定來獲取圖表以在字段中的數字更改時進行刷新。用Knockout自動更新ChartJS數據綁定

由於某些原因，當我輸入一個數字時，它不會自動刷新。但是，當我輸入一個數字並點擊刷新瀏覽器中的號碼時，

任何人都可以幫助我，使綁定更新實時？

<body> 
    <form> 
     <input name="ValueStream" id="ValueStream" data-bind="value: ValueStream, valueUpdate: 'input'"></input> 
     <input type="text" name="ProductService" id="ProductService" value="200"> 
     <input type="submit"> 
    </form> 

    <div id="canvas-holder" style="width:30%"> 
     <canvas id="chart-area" width="300" height="300"/> 
    </div> 

    <script> 
     var pAndS = document.getElementById("ProductService").value; 
     var vS = document.getElementById("ValueStream").value; 
     var polarData = [ 
      { 
       value: pAndS, 
       color:"#F7464A", 
       highlight: "#FF5A5E", 
       label: "Red" 
      }, 
      { 
       value: vS, 
       color: "#46BFBD", 
       highlight: "#5AD3D1", 
       label: "Green" 
      }, 
      { 
       value: 100, 
       color: "#FDB45C", 
       highlight: "#FFC870", 
       label: "Yellow" 
      }, 
      { 
       value: 40, 
       color: "#949FB1", 
       highlight: "#A8B3C5", 
       label: "Grey" 
      }, 
      { 
       value: 120, 
       color: "#4D5360", 
       highlight: "#616774", 
       label: "Dark Grey" 
      } 
     ]; 

     window.onload = function(){ 
      var ctx = document.getElementById("chart-area").getContext("2d"); 
      window.myPolarArea = new Chart(ctx).PolarArea(polarData, { 
       responsive:true 
      }); 
     }; 
    </script> 
</body>

來源

2014-07-22 Adam Redshaw

這裏沒有更新圖表，只在頁面加載時繪製。您可以[訂閱]（http://knockoutjs.com/documentation/observables.html#explicitly-subscribeing-to-observables）更改您的視圖模型，或編寫[自定義綁定處理程序]（http://knockoutjs.com /documentation/custom-bindings.html） –

chart.js之，只有當你調用方法繪製圖表。您需要某種方法來查看observable何時發生變化，然後再次調用PolarArea方法。你可以嘗試這裏提到的東西：Detecting change to Knockout view model。

來源

2014-08-15 20:11:27 LynxIntern

您不應該需要重新實例化圖表等。有一個.update方法可用：「在Chart實例上調用update（）將使用任何更新的值重新呈現圖表，允許您編輯多個現有點的值，然後在一個動畫渲染循環中渲染它們。「 – backdesk

所以問題是 - 當視圖模型改變時，你如何連接東西來運行.update？ – backdesk

用Knockout自動更新ChartJS數據綁定

回答

相關問題