Javascript 带有Django的Chart.js-使用REST

使用Django rest框架，我设置了查询，并将数据拉到如下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> 

var endpoint='/api/chart/data/'
var defaultData=[]
var标签=[]；
$.ajax({
方法：“获取”，
url:endpoint，
成功：功能（数据）{
labels=data.labels
defaultData=data.comp\u history\u data.forEach（function（条目）{
console.log（条目）
设定图（）
},
错误：函数（错误\u数据）{
console.log（“错误”）
console.log（错误\u数据）
}
})
函数集图表（）{
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx2{
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“#计算机”，
数据：默认数据，
背景颜色：[
"rgba(255,99,132,0.2)",，
],
边框颜色：[
"rgba(255,99132,1)",，
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
}); 
} 

小编辑：我可以用下面的代码将一个项目放到图表上，所以看起来数据正在通过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> 

var endpoint='/api/chart/data/'
var defaultData=[]
var标签=[]；
$.ajax({
方法：“获取”，
url:endpoint，
成功：功能（数据）{
labels=data.labels
defaultData=data.comp\u history\u data.forEach（function（条目）{
console.log（条目）
设定图（）
},
错误：函数（错误\u数据）{
console.log（“错误”）
console.log（错误\u数据）
}
})
函数集图表（）{
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx2{
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“#计算机”，
数据：defaultData[0]，
背景颜色：[
"rgba(255,99,132,0.2)",，
],
边框颜色：[
"rgba(255,99132,1)",，
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
}); 
} 

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

---

再次感谢

记住在html文件中包含

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

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

尝试更改：

defaultData = data.comp_history_data.forEach(functoin(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 %}

---

希望有帮助

看起来您的成功函数中有错误，如下所示

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

致：

---

嘿，谢谢你的帮助，得到了HTML行，我得到的图形显示只是没有数据。我不太确定我是否明白这里附加了什么。

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

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