大家好，我是kuls。
今天这篇文章源于我最近接的一个小外包，里面需要用到一些web端的可视化。
其实很多朋友也希望自己能够在web端实现可视化，但是却不知道怎么下手。
今天来给大家说说
首先，我们web端想要去显示一些可视化的数据，我们肯定调用别人写好的库是最好的，有哪些呢？
首推charts.js这个库里面的图表也算是比较丰富的
https://chartjs.bootcss.com/
但是很多朋友不知道怎么调用，这你就得好好补习前端知识啦
这里给大家举个小案例，教大家如何去使用这些web端的可视化控件。
一般比较完整的开源控件都会有官方文档
我们先找到官方文档中的安装，然后我们找到相应的js文件进行下载
在这里我们找到CDNJS，cdn就不多说了，你可以简单理解为某个网站中存储了charts.js文件，我们只需要去引用。
进入页面有我们可以复制相应的代码，例如
代码语言：javascript复制<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js" integrity="sha512-yadYcDSJyQExcKhjKSQOkBKy2BLDoW6WnnGXCAkCoRlpHGpYuVuBqGObf3g/TdB86sSbss1AOP4YlGSb6EKQPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
当然k哥在这里不是非常建议使用cdn的形式导入，因为有些时候cdn会挂掉，这会导致我们无法正常使用。
所以我们在项目中新建一个charts.js文件
然后访问js的地址，把里面的内容复制到我们创建的文件中。
然后我们在html中导入我们的charts.js文件
代码语言：javascript复制<script src="../static/plugins/chartjs/Chartv1.min.js"></script>
我们接着看文档中是如何使用的
其中文档给了我们这样一些代码：
代码语言：javascript复制<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
也就是说我们html标签只需要写一个canvas即可，然后通过js来渲染数据。大致的思路搞清楚了，我们就来看看js中哪里是导入数据的。
代码语言：javascript复制datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
不难发现data正是数据源。这时我们回到后端flask。
我们只需要创建一个接口，然后在这个函数中对数据进行分析获取，然后通过list列表传给前端html即可。
因为Flask默认使用的是Jinja2的模板，所以我们可以通过下面的方式来在js中调用后端传入的数据。
代码语言：javascript复制....
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["积极", "中立", "消极"],
datasets: [{
label: '数据表',
data: {{all_number | tojson}}, //注意这里
:
[
....
最终我们就可以在flask中实现可视化操作。
其实今天的文章如果了解前后端的朋友可能会觉得并不难，但是还是有很多的小伙伴会问到，所以也给大家总结了一下。
好了，今天的文章就到这啦，我们下期见。
