ノックアウトバインディングで使用するとDateAxisRendererがレンダリングされない

Question

jqplotのノックアウトバインディングを作成しましたが、デフォルトのレンダラーで完全に正常に動作します。 DateAxisRendererをx軸レンダラーとして使用すると、何らかの理由で行が描画されません。

ここで私が使用したコードは、ここに2つのグラフがあります。 1つはノックアウトバインディングを使用し、意図したとおりに動作し、ノックアウトバインディングは意図したとおりに機能しません。

そして、フィドルは、ここですべてのヘルプは高く評価されhttps://jsfiddle.net/0vauuf13/

です。

<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);