Chart.js雷达图表多个数据集

时间：2017-05-02 01:32:06

标签： mysql charts chart.js

我有一个MySQL表，其中一部分看起来像MySQL Database

我正在使用以下查询来计算从数据库中选择每个方面的次数并将其转换为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);
        }
    });

看起来像这样：Radar Chart

然而，现在我试图显示每个视频中有多少次，每个方面都被选中，并将其绘制在雷达图上。

我正在使用的查询生成此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"
   }
]

然而，我并不知道如何将这些数据整合到雷达图中。

我希望实现的是这样的。每种不同的颜色都是来自不同视频enter image description here

的数据

1 个答案:

答案 0 :(得分：1)

动态推送数据集中的数据，以便在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, 
    });

这应该适合你。

相关问题
最新问题