knockout ChartJs

Рейтинг: 0Ответов: 1Опубликовано: 15.04.2015

Использую вот такую библиотеку: http://www.chartjs.org/

HTML:

<script type="text/html" id="statisticsView">
    <div class="row">
        <div data-bind="myChart: true"></div>
    </div>
</script>

JS:

        ko.bindingHandlers.myChart = {
            init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {    

            var canvas = document.createElement('canvas');       
            canvas.width = 600;           
            canvas.height = 600;
            element.appendChild(canvas);
            var ctx = canvas.getContext("2d");
            new Chart(ctx).Pie(pieData);
        }
    };

Проблема в том, что ChartJs работает со свойствами ctx.canvas.offsetWidth и ctx.canvas.offsetHeight, а они равны нулю, и вылетает ошибка, как можно это исправить?

<div data-bind="myChart: true">
    <canvas id="chart-area" width="300" height="300"></canvas>
</div>

    ko.bindingHandlers.myChart = {
        update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
            var canvas = element.children["chart-area"];
            console.log(canvas.offsetWidth);//0
        }
    };

Нашел один не хороший способ:

    this.go = function () {
        ko.applyBindingsToNode(document.getElementById('test'), {
            myChart: true
        });
    }

    ko.bindingHandlers.myChart = {
        update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
            //var canvas = element.children["chart-area"];
            //console.log(canvas.offsetWidth);//0
            var canvas = document.createElement('canvas');
            var ctx2 = document.getElementById("chart-area").getContext("2d");
            canvas.width = 600;
            canvas.height = 600;
            element.appendChild(canvas);

            var ctx = canvas.getContext("2d");
            console.log(ctx.canvas.offsetWidth);//600
        }
    };

По всей видимости, нужно отложить как то биндинг, но вот как сделать это красиво?

Ответы

Ответов пока нет.