В Chart.js и django добавьте данные, нажав кнопку

avatar
X-MUK-625
8 апреля 2018 в 10:59
748
1
0

Я пытаюсь создать простую программу, которая рисует линейный график, используя Chart.js(ver2.7) и ajax.
Эта программа состоит в том, что когда пользователь нажимает кнопку, он может получить новые данные из сохраненных в базе данных, а затем продвигать метки и данные на графике одну за другой в режиме реального времени.

Я понимаю, что пишу следующим образом, но я много раз пробовал, что написать внутри функции, но реализовать не смог.

$("#id").click(function() {
});

В настоящее время я могу правильно отобразить диаграмму, прежде чем реализовать описанную выше функцию. 

$( document ).ready(function() {
var endpoint ='/api/chart/data';
var defaultData = [];
var labels = [];

$.ajax({
    method: "GET",
    url: endpoint,
    success: function (data) {
    labels = data.labels;　
    defaultData = data.defaults;
    setChart();
    },
    error: function (error_data) {
        console.log("error");
        console.log(error_data)
    }
});


function setChart() {
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '# of medals',
                data: defaultData,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    ...etc
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    ...etc
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

graph.html

 <div class="col-sm-6">
    <canvas id="myChart" width="400" height="400"></canvas>
  </div>

Как это должно быть реализовано?

Источник

Ответы (1)

avatar
HenryM
8 апреля 2018 в 18:51
0

Ранее я делал что-то подобное (очевидно, что я делаю изменение в поле выбора, но вы можете назвать его как хотите):

$('#id_target_select').on('change', function() {
    var info = [];
    info[0] = $('#id_language').val();
    info[1] = $('#id_regulation_select').val();
    info[2] = $('#id_target_regulation_select').val();
    info[3] = $('#id_paragraph_select').val();
    info[4] = $('#id_number_topics').val();
    $.ajax({
        url : "/ajax/radar_graph/",  // endpoint
        type : "GET", // http method
        data : { info : info }, // send data
        // handle success response
        success : function(json) {

            // Add graph
            var chartLabels = json.categories.map(function(e) {
                return e.name;
            })
            var chartValues = json.values.map(function(e) {
                return e;
            })

            var ctx = document.getElementById("myChart");
            var data = {
                labels: chartLabels,
                datasets: [{
                    "label" : json.startRegulation[0].name,
                    "data" : chartValues,
                    "fill" : true,
                    "backgroundColor":"rgba(255, 99, 132, 0.2)",
                    "borderColor":"rgb(255, 99, 132)",
                    "pointBackgroundColor":"rgb(255, 99, 132)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(255, 99, 132)"
                }]
            }
            var options = {
                "elements":
                    {"line":{"tension":0,"borderWidth":3}
                    },
                scale  : {
                    ticks : {
                        min : 0,

                    }
                }
            }

            var myChart = new Chart(ctx, {
                type: 'radar',
                data: data,
                options : options,
            });