第一个和最后一个值未显示在与 django 一起使用的 chart.js 中

Question

我想在图表中显示员工和薪水，我使用了 chart.js 和 django。但我无法显示第一个和最后一个员工的薪水..任何建议表示赞赏。

#views
    if request.method=="GET":
        return render(request, 'upload_pandas.html')
    else:
        file=request.FILES['myfile']
        file_read=pd.read_excel(file)
        column_selection=file_read['Salary']
        salary=[]
        salary=list(column_selection)
        print(salary)
        name=[]
        name=list(file_read['First Name'])
        print(name)
        lis=[salary,name]
        data={
            'salary_data': salary,
            'label_data': name,

        }
        return render(request,'map.html',{'data':data})



#url.py

urlpatterns=[

    path('upload/',views.view_panda),

]

问题出在这里，当我在控制台中打印时，它打印了所有值，但它没有加载到图表中。enter image description here

#map.html

<html>
<head>

    <title>Chart.js</title>
</head>
<body>
<div >
    <div>
        <canvas id="genderchart" width="1000"></canvas>
    </div>
</div>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script>

            var label={% autoescape off %}
                        "{{ data.salary_data }}"
                      {% endautoescape %};
            var label1={% autoescape off %}
                            "{{ data.label_data }}"
                       {% endautoescape %};
            var lab=label1.split(',')
            console.log(lab)
            console.log(label)
            console.log(label1)

            new Chart(document.getElementById("genderchart"),{
                type:'bar',
                data:{
                    labels:label1.split(','),
                    datasets:[
                        {
                            label:"employee",
                            backgroundColor:"rgba(62,149,205,1)",
                            borderColor: "rgba(62,149,205,1)",
                            pointBackgroundColor:"rgba(62,149,205,1)",
                            data: label.split(','),

                        },

                    ]
                },
                options:{
                    legend:{
                        labels:{
                            fontSize:18
                        }
                    },
                    title:{
                        display : true,
                        text : "Salary Wise",
                        fontSize : 22.0
                    },
                    scales:{
                        yAxes:[{
                            offset: true,

                            ticks:{
                                suggestedMin: true,
                                fontSize:15.0,
                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Salary',
                                fontSize:20.0,
                            }
                        }],

                        xAxes:[{
                            desplay: true,
                            offset: true,
                            ticks:{
                                beginAtZero: true,
                                fontSize:15.0,

                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Employee',
                                fontSize:20.0,
                            }
                        }]
                     },
                    responsive: false,
                }
            });

</script>
</body>
</html>

Answer 1

我实际上无法重现您的错误。 Here 是我对生成的数据所做的（它显示得很好）。

const count = 26
for (let x = 0; x < count; x++) {
  sData.salary.push(Math.floor(Math.random()*100)*1000)
  sData.label.push(Math.random().toString(36).substr(2, 5))
}

能否制作一个在线编辑器版本，方便我们查看？我猜问题出在标签字符串或选项上，但很难猜到...

顺便说一句，您有一些拼写错误，例如"desplay"、scriptsrc 和 suggestedMin 不是布尔值，而是一个整数。

Answer 2

实际上，我做对了..这个错误很愚蠢，因为我用“”得到的值是

let data={% autoescape off %}
                   "{{ data }}"
                {% endautoescape %};

而不是

let data={% autoescape off %}
                  {{ data }}
         {% endautoescape %};

所以，不需要 split()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart.js</title>
</head>
<body>
<div >
    <div>
        <canvas id="genderchart" width="1000"></canvas>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script>
let data={% autoescape off %}
                        {{ data }}
                      {% endautoescape %};
console.log(data)


            new Chart(document.getElementById("genderchart"),{
                type:'bar',
                data:{
                    labels:data.label_data,
                    datasets:[
                        {
                            label:"employee",
                            backgroundColor:"rgba(62,149,205,1)",
                            borderColor: "rgba(62,149,205,1)",
                            pointBackgroundColor:"rgba(62,149,205,1)",
                            data: data.salary_data,

                        },

                    ]
                },
                options:{
                    legend:{
                        labels:{
                            fontSize:18
                        }
                    },
                    title:{
                        display : true,
                        text : "Salary Wise",
                        fontSize : 22.0
                    },
                    scales:{
                        yAxes:[{
                            offset: true,

                            ticks:{
                                suggestedMin: 0,
                                fontSize:15.0,
                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Salary',
                                fontSize:20.0,
                            }
                        }],

                        xAxes:[{
                            display: true,
                            offset: true,
                            ticks:{
                                beginAtZero: true,
                                fontSize:15.0,

                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Employee',
                                fontSize:20.0,
                            }
                        }]
                     },
                    responsive: false,
                }
            });

</script>

</body>
</html>

第一个和最后一个值未显示在与 django 一起使用的 chart.js 中

first and last value is not displaying in chart.js used with django

python

django

chart.js

chart.js2