GoogleCharts与KnockoutJS自定义绑定只绘制第一个图表，而不是其余的

GoogleCharts with KnockoutJS custom binding only draws first chart but not the rest

本文关键字：自定义 KnockoutJS 绑定 第一个 绘制 GoogleCharts      更新时间：2023-09-26

我一直在寻找解决这个问题的方法，但找不到任何地方。所以我请求你们来这里。

我试图绑定GoogleBarChart与KnockoutJS模型视图。所有Binding事件都被调用得很好，但不知何故它只绘制了第一张图表。

绑定方式如下:

// View Model 1
function ViewModel1() {    
    var self = this;
    self.ViewModel1_BarData =  ko.computed(function () {
         
        return new google.visualization.arrayToDataTable([
          ['EmailAddress', 'Received'],
          ['email1@mail.com', 12],
          ['email2@mail.com', 20],
          ['email3@mail.com', 15]
		  ]);
    });
  
  
  // View Model 2
function ViewModel2() {    
    var self = this;
    self.ViewModel2_BarData =  ko.computed(function () {
         
        return new google.visualization.arrayToDataTable([
          ['Server', 'Occupied Space'],
          ['server1', 10],
          ['server2', 20],
          ['server3', 40]
		  ]);
    });
  
  
  
// Knockout Custom Binding for googleBarChart
  
ko.bindingHandlers.googleBarChart = {
    init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
        var chart = new google.charts.Bar(element);
        ko.utils.domData.set(element, 'googleBarChart', chart);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var options = allBindings.get('chartOptions') || {};        
        options = ko.unwrap(options);
      
        var chart = ko.utils.domData.get(element,'googleBarChart');
        chart.draw(value, options);
    }
};
<!-- First Chart -->
<div id="ViewModel1Bindng_div">
  
  <div id="ViewModel1_bar_div" data-bind="googleBarChart: ViewModel1_BarData, chartOptions: {
    width: 400, legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}"></div>
  
</div>
<!-- Second Chart -->
<div id="ViewModel2Binding_div">
 
  <div id="ViewModel2_bar_div" data-bind="googleBarChart: ViewModel2_BarData, chartOptions: {
    width: 400,legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}">
   </div>
</div>

任何帮助都会很感激。提前感谢。问候,Rohail

您在这里拼错了元素id: 

ko.applyBindings(ViewModel2_model , document.getElementById("ViewModel2Bindng_div"))

应该是:

ko.applyBindings(ViewModel2_model , document.getElementById("ViewModel2Binding_div"))

我已经更新了你的代码片段。

// View Model 1
function ViewModel1() {
  var self = this;
  self.ViewModel1_BarData = ko.computed(function() {
    return new google.visualization.arrayToDataTable([
      ['EmailAddress', 'Received'],
      ['email1@mail.com', 12],
      ['email2@mail.com', 20],
      ['email3@mail.com', 15]
    ]);
  });
}
// View Model 2
function ViewModel2() {
  var self = this;
  self.ViewModel2_BarData = ko.computed(function() {
    return new google.visualization.arrayToDataTable([
      ['Server', 'Occupied Space'],
      ['server1', 10],
      ['server2', 20],
      ['server3', 40]
    ]);
  });
}
// Knockout Custom Binding for googleBarChart
ko.bindingHandlers.googleBarChart = {
  init: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
    var chart = new google.visualization.BarChart(element);
    ko.utils.domData.set(element, 'googleBarChart', chart);
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = ko.unwrap(valueAccessor());
    var options = allBindings.get('chartOptions') || {};
    options = ko.unwrap(options);
    var chart = ko.utils.domData.get(element, 'googleBarChart');
    chart.draw(value, options);
  }
};
var ViewModel1_model = new ViewModel1();
ko.applyBindings(ViewModel1_model, document.getElementById("ViewModel1Bindng_div"));
var ViewModel2_model = new ViewModel2();
ko.applyBindings(ViewModel2_model, document.getElementById("ViewModel2Binding_div"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'en'}]}">
</script>
<!-- First Chart -->
<div id="ViewModel1Bindng_div">
  <div id="ViewModel1_bar_div" data-bind="googleBarChart: ViewModel1_BarData, chartOptions: {
    width: 400, legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}"></div>
</div>
<!-- Second Chart -->
<div id="ViewModel2Binding_div">
  <div id="ViewModel2_bar_div" data-bind="googleBarChart: ViewModel2_BarData, chartOptions: {
    width: 400,legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}">
  </div>
</div>

相关文章：