如何使用ajax从php返回的字符串作为chart.js图表​​的数据？

Question

我有一些查询数据库的php，如果我在控制台中查看它，则返回一个如下所示的字符串。

 datasets: [{label:'Crafting Ideas', borderColor: '#e6194b', fill: false, data: [{x:new Date(1523923200000),y:5},{x:new Date(1525305600000),y:3},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:3},] },{label:'Punctuation', borderColor: '#3e95cd', fill: false, data: [{x:new Date(1523923200000),y:5},{x:new Date(1525305600000),y:3},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:3},] },{label:'Text Forms & Features', borderColor: '#3cb44b', fill: false, data: [{x:new Date(1523923200000),y:5},{x:new Date(1525305600000),y:4},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:4},] },{label:'Vocabulary', borderColor: '#ffe119', fill: false, data: [{x:new Date(1523923200000),y:9},{x:new Date(1525305600000),y:8},{x:new Date(1526256000000),y:5},{x:new Date(1527811200000),y:6},] },{label:'Grammatical Accuracy', borderColor: '#0082c8', fill: false, data: [{x:new Date(1523923200000),y:6},{x:new Date(1525305600000),y:5},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:3},] },{label:'Group and Word Level Grammar', borderColor: '#3e95cd', fill: false, data: [{x:new Date(1523923200000),y:4},{x:new Date(1525305600000),y:4},{x:new Date(1526256000000),y:3},{x:new Date(1527811200000),y:5},] },{label:'Sentence Level Grammar', borderColor: '#911eb4', fill: false, data: [{x:new Date(1523923200000),y:6},{x:new Date(1525305600000),y:6},{x:new Date(1526256000000),y:6},{x:new Date(1527811200000),y:5},] },{label:'Whole Text Level Grammar', borderColor: '#46f0f0', fill: false, data: [{x:new Date(1523923200000),y:4},{x:new Date(1525305600000),y:3},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:1},] },{label:'Crafting Ideas', borderColor: '#f032e6', fill: false, data: [{x:new Date(1523923200000),y:5},{x:new Date(1525305600000),y:4},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:3},] },{label:'Spelling', borderColor: '#d2f53c', fill: false, data: [{x:new Date(1523923200000),y:5},{x:new Date(1525305600000),y:5},{x:new Date(1526256000000),y:4},{x:new Date(1527811200000),y:4},] },{label:'Handwriting', borderColor: '#3e95cd', fill: false, data: [{x:new Date(1523923200000),y:6},{x:new Date(1525305600000),y:4},{x:new Date(1526256000000),y:3},{x:new Date(1527811200000),y:3},] },{label:'Element Aggregate', borderColor: '#3e95cd', fill: false, data: [{x:new Date(1523923200000),y:62.5},{x:new Date(1525305600000),y:52.27},{x:new Date(1526256000000),y:46.59},{x:new Date(1527811200000),y:42.05},] },] },

当我将其粘贴到我的图表js中时，它会呈现一个可爱的图表。我对它非常满意，但我无法将从ajax返回的数据集放入我的chart.js代码中。我试图弄乱全局变量并将图表代码移动到成功函数中，但似乎没有任何效果。

jQuery(document).ready(function(){
var studenttax = jQuery("div[id='student-tax']").attr('data');  

jQuery.ajax({
url  : 'https://goodatschool.com/writing/wp-admin/admin-ajax.php',
type : 'post',
data : {
action  : 'return_student_data',
studenttax : studenttax
},
success : function( response ) {   
chartfunction(response)
}

})
});

function chartfunction(val) {
var chartdata = val;
var chart = new Chart(document.getElementById('myChart'), {    
type: 'line',
data: val       
options: {      
    scales: {
        xAxes: [{
               type: 'time',
               time: {  unit: 'day',
                        distribution: 'linear',
                        displayFormats: {
                           'day': 'MMM DD',
                        }},              
          scaleLabel: {
            display: true,
            labelString: 'Date of Assessment'
          }
        }],
        yAxes: [{
            ticks: {
                min: 0,
                },
          scaleLabel: {
            display: true,                
            labelString: 'Percentage Score'
          }
        }] },
    title: {
    display: true,
    text: 'Student Writing Assessments',
},   
    legend: {
       display: true,
      position: 'bottom'
    }
 }
 });  

 }

这只会在检查器中返回以下内容：

function chartfunction(val) {
var chartdata = val;
var chart = new Chart(document.getElementById('myChart'), {    
type: 'line',
data: chartdata     
options: {      

Answer 1

尝试

data: val.dataset.data 

而不是

data: val

看起来你只是将整个json弹出到val字段中，而不是隔离绘图所需的数据部分

Answer 2

问题是来自php的响应实际上是一个字符串。 Chart（）要求数据是一个对象，因此在php中使用相关数据构建一个数组并使用json_encode（）允许数据属性用服务器中的值填充。