DateAxisRenderer würde nicht rendern, wenn mit Knockout-Bindung verwendet

Question

Ich habe eine Knockout-Bindung für jqplot geschrieben, es funktioniert einwandfrei mit dem Standard-Renderer. Wenn ich DateAxisRenderer als X-Achsen-Renderer verwende, zeichnet es aus irgendeinem Grund keine Linien.

Hier ist der Code, den ich verwendet habe, können Sie zwei Diagramme hier sehen. Eine, die eine Knockout-Bindung verwendet, die nicht wie beabsichtigt funktioniert, und eine andere, bei der die Knock-Out-Bindung nicht wie vorgesehen funktioniert.

Und die Geige ist hier https://jsfiddle.net/0vauuf13/

Jede Hilfe sehr geschätzt wird.

<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

Rufen Sie mich dumm! Ich habe gerade eine eckige Klammer in den Datenpunkten verpasst. Die folgende Zeile umschließt den Datenpunkt mit [] eckigen Klammern.

Ich sollte line1 Daten mit [] eingewickelt werden, bevor ich es zur ko-Bindung überlasse.

var plot3 = $('#chart3').jqplot([line1], plotOptions);