Question

我正在尝试制作一个简单的程序，使用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>

应如何实施？

Answer 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,
            });

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

1 个答案: