雷达图(chart.js 2.5.0)使用数据库值创建第二层

时间:2017-04-07 08:35:23

标签: javascript php charts chart.js

我正在使用Chartjs创建雷达图表以显示数十个模块。它适用于1个模块,但是当我进入第2个模块时,数据被放置在同一数据集中,导致标签加倍。值点也没有改变名称,保持第一个模块点标签,但具有不同的值。

这是用于创建图形的函数,如果数据未定义则会创建图表,但如果没有,则会将数据添加到数据集中。

<script src=//code.jquery.com/jquery-3.2.1.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js></script>
<input id=MOD_CODE value=SET08108><button id='go'>Go</button>

<canvas id="myChart" width="300" height="300"></canvas>
<script>
var data;
$(function(){
  $('#go').click(function(){
    $.ajax({url:'output.php', data 
      {MOD_CODE:$('#MOD_CODE').val()},dataType:'json', success:function(d){
    if(data===undefined)
      data = {labels:[],datasets:[{label:$('#MOD_CODE').val()+' Results',data:[],}]};
  else
  {
    data.datasets.push({label:$('#MOD_CODE').val()+' Results',data:[],});   
  }
  for(var i=0;i<d.length;i++){
    data.labels.push(d[i][0]);
    data.datasets[0].data.push(parseFloat(d[i][1]));
  }
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
     type: 'radar',
     data:data,
     options:{
       responsive:false,
       scale:{ticks:{beginAtZero: true}}}});
    }});
  })
});
</script>

这是根据数据库中的模块代码获取数据的php文件,它也转换为数据集的json格式。

<?php
if(!array_key_exists('MOD_CODE',$_REQUEST)){
  print "<form><input name=MOD_CODE></form>";
  exit();
}

$con = new mysqli('');
  if (mysqli_connect_errno()) {
  printf("Connection failed: %s\n", mysqli_connect_error());
  exit();
}
$sql = " SELECT QUE_CODE,
         100*AVG(CASE WHEN RES_VALU IN (4,5) THEN 1 ELSE 0 END) AS v
         FROM INS_RES
         WHERE MOD_CODE = ?
         GROUP BY QUE_CODE
         ORDER BY QUE_CODE
       ";
$stmt = $con->prepare($sql)
  or die($con->error);
$stmt->bind_param('s',$_REQUEST['MOD_CODE'])
  or die('Bind error');
$stmt->execute();
$res = $stmt->get_result()
  or die('get_result failed: '.$con->error);
print json_encode($res->fetch_all());

0 个答案:

没有答案