Chart.js 雷达图多个数据集
迪米塔尔·阿拉巴吉斯基
我有一个 MySQL 表，其中一部分看起来像这样
我正在使用以下查询来计算从数据库中选择每个方面的次数并将其转换为 JSON 以便将其用于雷达图。
SELECT Aspect,COUNT(Aspect) as AspectNumber from text_xml group by Aspect
最终的 JSON 输出如下所示
[
{
"Aspect":" Structure",
"AspectNumber":"18"
},
{
"Aspect":"Delivery",
"AspectNumber":"96"
},
{
"Aspect":"I am rather good at this",
"AspectNumber":"55"
},
{
"Aspect":"I did\/saw this in the past",
"AspectNumber":"95"
},
{
"Aspect":"I didn't realize I wasn't doing this",
"AspectNumber":"75"
},
{
"Aspect":"I like this point",
"AspectNumber":"263"
},
{
"Aspect":"No Aspect Selected",
"AspectNumber":"190"
},
{
"Aspect":"Speech",
"AspectNumber":"81"
},
{
"Aspect":"Structure",
"AspectNumber":"62"
},
{
"Aspect":"Visual adis",
"AspectNumber":"17"
},
{
"Aspect":"Visual aids",
"AspectNumber":"69"
}
]
然后我用下面的代码生成一个图表
$.ajax({
// Get the data for the chart
url: "http://localhost/chartjs/radardata.php",
method: "GET",
success: function(data) {
console.log(data);
var numcomments = [];
var users = [];
// Get the different values into an array
for(var i in data) {
numcomments.push(data[i].AspectNumber);
users.push(data[i].Aspect);
}
// Load the data into the chart
var chartdata1 = {
labels: users,
datasets: [
{
label: "Selected",
lineTension: 0.1,
backgroundColor: "rgba(178, 223, 219,0.2)",
borderColor: "#009688",
pointBackgroundColor: "#004D40",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: numcomments
}
]
};
Chart.defaults.global.defaultFontColor = '#E0E0E0';
Chart.defaults.scale.gridLines.color = "#9E9E9E";
Chart.defaults.scale.gridLines.zeroLineColor = "#9E9E9E";
var ctx = $("#linechart");
// Create the chart and its options
var options = {
responsive: true,
maintainAspectRadio: true,
tooltips: {
enable: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data){
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Times';
}
}
},
legend: {
position: 'top',
},
title: {
display: false,
},
scale: {
gridLines: {
color: "#9E9E9E",
},
angleLines: {
color: '#9E9E9E'
},
reverse: false,
ticks: {
showLabelBackdrop: false,
min: 0,
beginAtZero: false,
stepSize: 30
},
},
scaleOverride: false,
scaleSteps: 5,
scaleStepWidth: 20,
scaleStartValue: 100,
};
var LineGraph = new Chart(ctx, {
type: 'radar',
data: chartdata1,
options: options
});
},
error: function(data) {
console.log(data);
}
});
看起来像这样：
但是，现在我试图显示每个视频中每个方面的选择次数，并将其绘制在雷达图上。
我为此使用的查询生成此 JSON 输出
[
{
"VideoName":"TUTORIAL 1: How to Give an Awesome (PowerPoint) Presentation ",
"Aspect":"I am rather good at this",
"Count":"17"
},
{
"VideoName":"TUTORIAL 1: How to Give an Awesome (PowerPoint) Presentation ",
"Aspect":"I did\/saw this in the past",
"Count":"29"
},
{
"VideoName":"TUTORIAL 1: How to Give an Awesome (PowerPoint) Presentation ",
"Aspect":"I didn't realize I wasn't doing this",
"Count":"8"
},
{
"VideoName":"TUTORIAL 1: How to Give an Awesome (PowerPoint) Presentation ",
"Aspect":"I like this point",
"Count":"52"
},
{
"VideoName":"TUTORIAL 1: How to Give an Awesome (PowerPoint) Presentation ",
"Aspect":"No Aspect Selected",
"Count":"28"
},
{
"VideoName":"TUTORIAL 2: How to open and close presentations?",
"Aspect":"I am rather good at this",
"Count":"8"
},
{
"VideoName":"TUTORIAL 2: How to open and close presentations?",
"Aspect":"I did\/saw this in the past",
"Count":"25"
},
{
"VideoName":"TUTORIAL 2: How to open and close presentations?",
"Aspect":"I didn't realize I wasn't doing this",
"Count":"29"
},
{
"VideoName":"TUTORIAL 2: How to open and close presentations?",
"Aspect":"I like this point",
"Count":"84"
},
{
"VideoName":"TUTORIAL 2: How to open and close presentations?",
"Aspect":"No Aspect Selected",
"Count":"27"
},
{
"VideoName":"TUTORIAL 3: Make a presentation like Steve Jobs",
"Aspect":"I am rather good at this",
"Count":"19"
},
{
"VideoName":"TUTORIAL 3: Make a presentation like Steve Jobs",
"Aspect":"I did\/saw this in the past",
"Count":"22"
},
{
"VideoName":"TUTORIAL 3: Make a presentation like Steve Jobs",
"Aspect":"I didn't realize I wasn't doing this",
"Count":"14"
},
{
"VideoName":"TUTORIAL 3: Make a presentation like Steve Jobs",
"Aspect":"I like this point",
"Count":"75"
},
{
"VideoName":"TUTORIAL 3: Make a presentation like Steve Jobs",
"Aspect":"No Aspect Selected",
"Count":"44"
},
{
"VideoName":"TUTORIAL 4: The five secrets of speaking with confidence",
"Aspect":"I am rather good at this",
"Count":"11"
},
{
"VideoName":"TUTORIAL 4: The five secrets of speaking with confidence",
"Aspect":"I did\/saw this in the past",
"Count":"19"
},
{
"VideoName":"TUTORIAL 4: The five secrets of speaking with confidence",
"Aspect":"I didn't realize I wasn't doing this",
"Count":"24"
},
{
"VideoName":"TUTORIAL 4: The five secrets of speaking with confidence",
"Aspect":"I like this point",
"Count":"52"
},
{
"VideoName":"TUTORIAL 4: The five secrets of speaking with confidence",
"Aspect":"No Aspect Selected",
"Count":"22"
},
{
"VideoName":"X.EXAMPLE 1 - Abraham Heifets: How can we make better medicines? Computer tools for chemistry",
"Aspect":"Delivery",
"Count":"25"
},
{
"VideoName":"X.EXAMPLE 1 - Abraham Heifets: How can we make better medicines? Computer tools for chemistry",
"Aspect":"No Aspect Selected",
"Count":"8"
},
{
"VideoName":"X.EXAMPLE 1 - Abraham Heifets: How can we make better medicines? Computer tools for chemistry",
"Aspect":"Speech",
"Count":"14"
},
{
"VideoName":"X.EXAMPLE 1 - Abraham Heifets: How can we make better medicines? Computer tools for chemistry",
"Aspect":"Structure",
"Count":"24"
},
{
"VideoName":"X.EXAMPLE 1 - Abraham Heifets: How can we make better medicines? Computer tools for chemistry",
"Aspect":"Visual aids",
"Count":"11"
},
{
"VideoName":"X.EXAMPLE 1 - Carol Dweck: The power of believing that you can improve",
"Aspect":"Delivery",
"Count":"2"
},
{
"VideoName":"X.EXAMPLE 1 - Carol Dweck: The power of believing that you can improve",
"Aspect":"No Aspect Selected",
"Count":"2"
},
{
"VideoName":"X.EXAMPLE 1 - Carol Dweck: The power of believing that you can improve",
"Aspect":"Speech",
"Count":"4"
},
{
"VideoName":"X.EXAMPLE 1 - Carol Dweck: The power of believing that you can improve",
"Aspect":"Structure",
"Count":"1"
},
{
"VideoName":"X.EXAMPLE 1 - Carol Dweck: The power of believing that you can improve",
"Aspect":"Visual aids",
"Count":"2"
},
{
"VideoName":"X.EXAMPLE 2 - Johanna Blakley: Social media and the end of gender ",
"Aspect":" Structure",
"Count":"18"
},
{
"VideoName":"X.EXAMPLE 2 - Johanna Blakley: Social media and the end of gender ",
"Aspect":"Delivery",
"Count":"22"
},
{
"VideoName":"X.EXAMPLE 2 - Johanna Blakley: Social media and the end of gender ",
"Aspect":"No Aspect Selected",
"Count":"18"
},
{
"VideoName":"X.EXAMPLE 2 - Johanna Blakley: Social media and the end of gender ",
"Aspect":"Speech",
"Count":"14"
},
{
"VideoName":"X.EXAMPLE 2 - Johanna Blakley: Social media and the end of gender ",
"Aspect":"Visual aids",
"Count":"44"
},
{
"VideoName":"X.EXAMPLE 3 - Tim Berners-Lee: A Magna Carta for the web",
"Aspect":"Delivery",
"Count":"20"
},
{
"VideoName":"X.EXAMPLE 3 - Tim Berners-Lee: A Magna Carta for the web",
"Aspect":"No Aspect Selected",
"Count":"25"
},
{
"VideoName":"X.EXAMPLE 3 - Tim Berners-Lee: A Magna Carta for the web",
"Aspect":"Speech",
"Count":"36"
},
{
"VideoName":"X.EXAMPLE 3 - Tim Berners-Lee: A Magna Carta for the web",
"Aspect":"Structure",
"Count":"21"
},
{
"VideoName":"X.EXAMPLE 3 - Tim Berners-Lee: A Magna Carta for the web",
"Aspect":"Visual adis",
"Count":"17"
},
{
"VideoName":"X.EXAMPLE 4 - Eli Pariser: Beware online \"filter bubbles\"",
"Aspect":"Delivery",
"Count":"8"
},
{
"VideoName":"X.EXAMPLE 4 - Eli Pariser: Beware online \"filter bubbles\"",
"Aspect":"No Aspect Selected",
"Count":"5"
},
{
"VideoName":"X.EXAMPLE 4 - Eli Pariser: Beware online \"filter bubbles\"",
"Aspect":"Speech",
"Count":"1"
},
{
"VideoName":"X.EXAMPLE 4 - Eli Pariser: Beware online \"filter bubbles\"",
"Aspect":"Structure",
"Count":"2"
},
{
"VideoName":"X.EXAMPLE 4 - Eli Pariser: Beware online \"filter bubbles\"",
"Aspect":"Visual aids",
"Count":"2"
},
{
"VideoName":"X.EXAMPLE 4 - Jasdeep Saggar: Hypoxia-activated pro-drugs: a novel approach for breast cancer treatment",
"Aspect":"Delivery",
"Count":"19"
},
{
"VideoName":"X.EXAMPLE 4 - Jasdeep Saggar: Hypoxia-activated pro-drugs: a novel approach for breast cancer treatment",
"Aspect":"No Aspect Selected",
"Count":"11"
},
{
"VideoName":"X.EXAMPLE 4 - Jasdeep Saggar: Hypoxia-activated pro-drugs: a novel approach for breast cancer treatment",
"Aspect":"Speech",
"Count":"12"
},
{
"VideoName":"X.EXAMPLE 4 - Jasdeep Saggar: Hypoxia-activated pro-drugs: a novel approach for breast cancer treatment",
"Aspect":"Structure",
"Count":"14"
},
{
"VideoName":"X.EXAMPLE 4 - Jasdeep Saggar: Hypoxia-activated pro-drugs: a novel approach for breast cancer treatment",
"Aspect":"Visual aids",
"Count":"10"
}
]
但是，我不确定如何将这些数据整合到雷达图中。
我希望实现的是这样的。每种不同的颜色都是来自不同视频的数据
米兰库马尔
动态推送数据集中的数据，在js文件中实现同样的效果。
以下是相同的模板：
创建数据集和标签：
var color = ["rgba(241,28,39,1)", //red
"rgba(28,145,241,1)",//blue
"rgba(231,221,28,1)", //yellow
"rgba(38,231,28,1)", //green
"rgba(28,231,221,1)", //cyan
"rgba(231,228,211,1)", //pink
"rgba(3,1,3,1)", // black
"rgba(236,176,179,1)", //light pink
"rgba(239,107,51,1)", //orange
"rgba(157,51,239,1)", //violet
"rgba(16,82,248,1)", //royalblue
"rgba(241,28,39,1)"];
ChartData = {};
ChartData.labels = [];
ChartData.datasets = [];
for (index = 0; index <Number_of_Video_Names; index++) {
temp = [];
ChartData.datasets.push({});
dataset = ChartData.datasets[index]
dataset.backgroundColor = color[index],
dataset.borderColor = color[index],
dataset.label = [label1,label2,label3]; //labels
dataset.data = []; //data on Y-Axis
ChartData.datasets[index].data = [10,20,30,40,50]; //data
}
创建图表
var RadarGraph = new Chart(ctx, {
type: 'radar',
data: Chartdata,
});
这应该适合你。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
蓝屏死机没有修复解决方案
- 2
计算数据帧中每行的NA
- 3
UITableView的项目向下滚动后更改颜色，然后快速备份
- 4
Node.js中未捕获的异常错误，发生调用
- 5
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 6
Linux的官方Adobe Flash存储库是否已过时？
- 7
验证REST API参数
- 8
ggplot：对齐多个分面图-所有大小不同的分面
- 9
Mac OS X更新后的GRUB 2问题
- 10
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 11
带有错误“ where”条件的查询如何返回结果？
- 12
用日期数据透视表和日期顺序查询
- 13
VB.net将2条特定行导出到DataGridView
- 14
如何从视图一次更新多行（ASP.NET - Core）
- 15
Java Eclipse中的错误13，如何解决？
- 16
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 17
离子动态工具栏背景色
- 18
应用发明者仅从列表中选择一个随机项一次
- 19
当我尝试下载 StanfordNLP en 模型时，出现错误
- 20
python中的boto3文件上传
- 21
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
我来说两句