Chart.js 与 Django - 使用 REST

Question

使用 Django 休息框架，我设置了查询并将数据拉到如下所示的 url。我正在尝试将数据输入chart.js。我可以设法将其发送到控制台或绘制第一个结果，但如果没有进一步的帮助，将不胜感激

 "comp_history_data": [
        [
            "(2017, 01, 20)",
            256.0
        ],
        [
            "(2018, 01, 20)",
            456.0
        ],
        [
            "(2018, 02, 20)",
            568.0
        ],
        [
            "(2018, 03, 20)",
            683.0
        ]
    ],

这是我的 HTML 中的内容，可以很好地处理虚拟数据，只是不太确定如何使用上面的数据进行绘图

<script> 
var endpoint = '/api/chart/data/'
var defaultData = []
var labels = [];
$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        labels = data.labels
        defaultData = data.comp_history_data.forEach(functoin(entry){
        console.log(entry)
        setChart()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})
function setChart(){
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx2, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: '# of Computers',
            data: defaultData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
  }); 
} 


</script> 

小编辑：我可以用下面的代码将一个项目放到图表上，所以看起来数据通过 OK，只需要分开

<script> 
    var endpoint = '/api/chart/data/'
    var defaultData = []
    var labels = [];
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            labels = data.labels
            defaultData = data.comp_history_data.forEach(functoin(entry){
            console.log(entry)
            setChart()
        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)
        }
    })
    function setChart(){
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx2, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Computers',
                data: defaultData[0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
      }); 
    } 


    </script> 

关于我如何使用 chart.js 的数据数组的任何想法我希望 0 数据位于底部，数字绘制在图表上

再次感谢

Answer 1

记得在你的 html 文件中包含<canvas id="myChart"></canvas>。

这可能就是您所需要的。如果没有，这是我拥有的一个工作函数 - 我没有更改我的变量名以匹配你的，但我认为它很容易理解。

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

Answer 2

尝试改变：

defaultData = data.comp_history_data.forEach(functoin(entry){

到：

defaultData = data.comp_history_data.forEach(function(entry)){

另外，阅读模板过滤器 (Django) 的用法，也许你会发现它们很有帮助。

例如，从您的 views.py 文件中发送数据：

def MyView(request):
    comp_history_data: ['1', '2', '3']
    return render(request, 'chart.html', {'comp_history_data':comp_history_data})

然后在您的 HTML 文件中打印变量：

{% for var in comp_history_data %}
{{ var }}
{% endfor %}

希望对你有帮助

Answer 3

您的成功函数似乎有错误，如下所示

defaultData = data.comp_history_data.forEach(functoin(entry){

到：

defaultData = data.comp_history_data.forEach(function(entry){