Question

已经问过几次这个问题，但是我无法使用先前提供的答案来完成我的第一个动态Charts.js。我正在尝试构建一个简单的示例，该示例可以工作，一旦设法做到这一点，我就可以对其进行扩展。目前，我有以下内容：

1）一个简单的下拉菜单，您可以从以下菜单中选择一年：

<form>
<div class="row">
<div class="label"><b>Select Year</b></div>
<select id="year" name="year" style = "width:100%">
<option value=2017>2017</option>
<option value=2018>2018</option>
</select>
</div>
</form>
<br>

2）我用来在on.change上调用MySQL查询的一些JavaScript：

<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#year').on( 'change', function () {
         year = $('#year').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_chart_data',
            year: year,
        },
         success:function(output){
             jQuery('#y_data1').html( output );
         }
     });
    }).change();
});
</script>

3）查询MySQL数据库的PHP：

function get_chart_data(){
global $wpdb;

$year = $_POST['year'];

$myQuery = $wpdb->get_results('SELECT dreamTeamPoints FROM afl_master WHERE player_id = "CD_I270963" AND year = '.$year);

$data = array();
foreach ($myQuery as $result) {
    $data[] = $result->dreamTeamPoints;
}

wp_die();
}

add_action('wp_ajax_nopriv_call_chart_data', 'get_chart_data');
add_action('wp_ajax_call_chart_data', 'get_chart_data');

到目前为止，此代码已成功返回如下所示的值数组（选择2017年时）：

Array ( [0] => 68 [1] => 152 [2] => 139 [3] => 143 [4] => 132 [5] => 155 
[6] => 65 [7] => 59 [8] => 111 [9] => 157 [10] => 92 [11] => 62 
[12] => 89 [13] => 83 [14] => 105 [15] => 34 [16] => 134 [17] => 47 
[18] => 124 [19] => 97 [20] => 153 [21] => 149 [22] => 76 [23] => 97 )

现在，终于有了一个静态图，我想通过将变量 y_data1 （以下代码中的第三行）替换为MySQL响应，将其转换为动态图，但是我不知道如何将其输入到javascript中。

<script type="text/javascript">
var x_time  = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,"QF","SF","PF","GF"];
var y_data1 = [91,115,67,46,,,,,,,,,,,68,111,111,77,95,106,99,93];
var y_data2 = [84,74,64,79,,,,,,,,,,,82,84,80,82,88,87,78,79];
new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: x_time,
      datasets: [{
        type:'line',
        label: 'Fantasy Points',
        fill:false,
        backgroundColor: 'orange',
        borderColor: 'orange',
        data: y_data1,
        yAxisID: 'left-axis',
        pointRadius: 5,
        pointHoverRadius: 7
      }, {
        label: 'Time On Ground (%)',
        fill: true,
        backgroundColor: 'black',
        borderColor: 'black',
        data: y_data2,
        yAxisID: 'right-axis'
      }]
    },
    options: {
      title: {
        display: false},
      legend: { display: true },
      maintainAspectRatio:true,
      responsive: true,
      tooltips: {mode: 'index', intersect: false},
      hover: {mode: 'nearest', intersect: true},
      scales: {
        xAxes: [{display: true, stacked:true, scaleLabel: {display: true, labelString: 'Round'}}],
        yAxes: [{
          type:'linear',
          id:'left-axis',
          display: true,
          position: 'left',
          scaleLabel: {display: true, labelString: 'Fantasy Points'},
          gridLines: {drawOnChartArea:false},
          ticks: {beginAtZero: true}
        },{
          type:'linear',
          id:'right-axis',
          display: true,
          position: 'right',
          stacked:false,
          scaleLabel: {display: true, labelString: 'Time On Ground (%)'},
          gridLines: {drawOnChartArea:false},
          ticks: {beginAtZero: true}
        }]
      }
    }
});
</script>

感谢人们可以提供的任何帮助。

Answer 1

我将以字符串而不是数组的形式返回值：

$data = '';
foreach ($myQuery as $result) {
    $data .= $result->dreamTeamPoints.',';
}

然后将其分配给成功的ajax发布中的值：

     success:function(output){
         //jQuery('#y_data1').html( output );
         var out = output;
     }

最后将'out'变量放入赋值中：

var y_data1 = [ out ];

您也许可以进一步简化它-前往老鹰乐队。

将PHP MySQL调用馈入Charts.js

1 个答案: