Как создать диаграмму динамически и добавить в DOM с помощью chart.js - PullRequest
Новая
       37

Как создать диаграмму динамически и добавить в DOM с помощью chart.js

0 голосов
/ 20 декабря 2018

Я пытаюсь создать диаграмму и динамически добавить ее в DOM.Контекст диаграммы создается динамически, так как я создаю с использованием таблиц данных.

Вот что я пробовал: 

function format(row_data) {
    var html = '<div class="row justify-content-center">';
    for (let i = 0; i < row_data.items.length; i++) {
        var item = row_data.items[i];

        var correct = '';

        if (i == 0) {
            correct = 'text-success';
        }

        html += `<div class="col-md-5 col-sm-6 col-lg-4 mb-5">
            <div class="card border-0 shadow ">
                <div class="card-header border-0">
                    <h6 class="font-weight-bold ${correct}">${item.supplier_name}</h6>
                </div>
                <div class="card-body row">
                    <div class="col-6 "  data-toggle="tooltip" data-title="Quantity Purchased">
                        <small>Qty:</small> 
                        <span class="font-weight-bold">${item.qty}</span>
                    </div>
                    <div class="col-6 text-right" data-toggle="tooltip" data-title="Purchase Rate">
                        <div class="font-weight-bold">₹ ${item.avg_purchase_rate.toFixed(2)}</div>
                        <small>Rate</small>
                    </div>
                    <div class="col-6"  data-toggle="tooltip" data-toggle="tooltip" data-title='Total Due of this supplier  (<i class="fa fa-rupee-sign"></i>)'>
                        <div class="font-weight-bold" >${(item.opning_balance + item.total_purchase_amount - item.total_purchase_return - item.total_payment).toFixed(2)}</div>
                        <small>Due Amount</small> 
                    </div>
                    <div class="col-6 text-right pt-3" data-toggle="tooltip" data-title="You have purchased ${item.count} times from this supplier">
                        <span class="font-weight-bold">${item.count}</span>
                        <small>Times</small> 
                    </div>
                    <canvas id="chart_${i}"></canvas>
                </div>
            </div> 
        </div>`;

        var myChart = new Chart($(html).find('#chart_' + i), {
            type: 'bar',
            data: {
                labels: item.sequence_qty,
                datasets: [{
                    label: '# of Votes',
                    data: item.sequence_purchase_rate,
                    backgroundColor: ['rgba(255, 255, 255, 0.2)'],
                    borderColor: ['#999'],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });            
    }
    html += '</div>';
    return html;
}

Выше функция format() возвращает желаемый HTML.и позже я добавляю его с помощью функции datatables child.row.

Я могу log создать диаграмму динамически, но как я могу показать / отобразить диаграмму.

...