在 Chart.js 和 django 中，通过单击按钮添加数据答案

【问题标题】：In Chart.js and django, add data by clicking the button在 Chart.js 和 django 中，通过单击按钮添加数据
【发布时间】：2018-09-17 22:03:47
【问题描述】：

我正在尝试制作一个使用 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>

这应该如何实现？

【问题讨论】：

标签： javascript jquery ajax django chart.js

【解决方案1】：

我以前做过类似的事情（显然我正在更改选择字段，但你可以随意调用它）：

$('#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,
            });

【讨论】：