Question

我为jqplot编写了一个敲除绑定，它与默认渲染器完美配合。当我使用DateAxisRenderer作为x轴渲染器时，由于某种原因它不会绘制线条。

这是我使用的代码，你可以在这里看到两个图表。一个使用敲除绑定不能按预期工作，另一个没有敲除绑定，按预期工作。

感谢任何帮助。

<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>

<div id="chart3" style="height:300px;width:600px; "></div>
<div id="chart-container">
  <div id="chart4" style="height:300px;width:600px;" data-bind="jqplot:chartData"></div>
</div>


$(document).ready(function() {

  var line1 = [
    ['2008-06-30 8:00AM', 4],
    ['2008-7-14 8:00AM', 6.5],
    ['2008-7-28 8:00AM', 5.7],
    ['2008-8-11 8:00AM', 9],
    ['2008-8-25 8:00AM', 8.2]
  ];

  var plotOptions = {
    title: 'Customized Date Axis',
    axes: {
      xaxis: {
        renderer: $.jqplot.DateAxisRenderer,
        tickOptions: {
          formatString: '%b %#d, %#I %p'
        },
        min: 'June 16, 2008 8:00AM',
        tickInterval: '2 weeks'
      }
    },
    series: [{
      lineWidth: 4,
      markerOptions: {
        style: 'square'
      }
    }]
  };
  var plot3 = $('#chart3').jqplot([line1], plotOptions);

  ko.applyBindings({
    chartData: {
      data: line1,
      options: plotOptions
    }
  }, $("#chart-container")[0]);
});


ko.bindingHandlers.jqplot = {
  init: function(element, valueAccessor, allBindingsAccessor, context) {

  },
  update: function(element, valueAccessor, allBindingsAccessor, context) {
    var value = ko.unwrap(valueAccessor()) || {};
    var data = value.data || [];
    var options = value.options || {};
    if (data.length > 0) {
      if ($(element).data('jqplot')) {
        var plotObject = $(element).data('jqplot');
        //plot.replot(data, options);
        plotObject.destroy();
      }
      $(element).jqplot(data, options);
    }
  }
};

Answer 1

叫我哑巴！我只是错过了数据点中的方括号。下面的行用[]方括号包装数据点。

在将line1传递给ko绑定之前，我应该用[]包裹var plot3 = $('#chart3').jqplot([line1], plotOptions);数据。

CREATE TABLE toys(product VARCHAR(255), colour VARCHAR(255)); 
INSERT INTO toys (product, colour) 
VALUES ('balloon', 'red'), 
('balloon', 'white'),
('balloon', 'green'), 
('balloon', 'yellow'), 
('rubber duck', 'yellow'), 
('rubber duck', 'white');

与淘汰赛绑定一起使用时，DateAxisRenderer不会渲染

1 个答案: