HighChart Basic行不显示行

Question

我需要创建一个基本折线图，其中数据存储在mysql db和php中，用于数据提取，但不能在图表上显示行。

我包含以下代码：

js code

$(document).ready(function() {

var options = {
  chart: {
          renderTo: 'chartPersonale',
          type: 'line',
          shadow: true,
          marginRight: 130,
          marginBottom: 25,
          backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, '#E0C6A5'],
                [1, '#FDEBC4']
            ]
          },
          plotBackgroundColor: null,
          plotShadow: true, 
        },
  title: {
      text: 'Performance Staff',
      x: -20 //center
  },
  subtitle: {
      text: '',
      x: -20
  },
  xAxis: {
     categories: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic']
  },
  yAxis: {
      title: {
          text: 'Appuntamenti (%)'
      },
      plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
      }]
  },
  tooltip: {
      valueSuffix: ' %'
  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -10,
      y: 100,
      borderWidth: 0
  },
  series: []
};

$.ajax({ url: "Model/lineChartPersonale.php",
      type: "POST",
      data:  "",
      success: function(data) {
         $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {
                    series.data = val
                }
            });
        options.series.push(series);
        });
        console.log(options.series);
         var chart = new Highcharts.Chart(options);
          }, 
      error: function(response, error) {
          //
      }
  });
});

php code

<?php
  include('../Include/classi.inc.php');
  header("content-type: application/json");
  $output = array(); 
  $db= new cDB();
  $db->query("select name from staff");
  while($rec=$db->record()){
  $arr = array("name"=>$rec['name'],"data"=>"[".rand(0,50).",     ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50).", ".rand(0,50)."]");
  array_push($output, json_encode($arr)); 
}
echo "[";
  foreach($output as $val){
  if(empty($val)) continue;
  echo $val;
  if($val != end($output)) echo ",\n";
  }
echo "]";


?>

输出PHP

[{"name":"FRANCESCA ","data":"[40, 30, 31, 29, 32, 35, 24, 32, 18, 41, 42, 6]"},
{"name":"LUIZA ","data":"[28, 34, 1, 26, 16, 24, 45, 40, 13, 48, 40, 20]"},
{"name":"ANTONELLA ","data":"[22, 16, 27, 16, 24, 14, 25, 1, 23, 4, 26, 24]"},
{"name":"CHIARA ","data":"[49, 22, 47, 7, 5, 27, 29, 50, 24, 6, 41, 25]"},
{"name":"EMILIA","data":"[8, 21, 24, 32, 39, 6, 46, 43, 19, 24, 49, 6]"},
{"name":"MARISA","data":"[29, 9, 49, 48, 24, 23, 40, 12, 33, 2, 37, 26]"}]

和HTML

    <div class="ui-grid-solo">
     <div class="ui-block-a">
      <div id="chartPersonale" style="min-width: 350px; height: 400px; margin: 0 auto">  </div>
     </div>
    </div>

我哪里错了？

谢谢！

Answer 1

问题似乎是数据值的引用问题，例如：“[1,2,3 ...]”而不是 [1,2,3 ...]。我试图解析字符串，但没有结果。 如果我手动传递值，它就可以了！

$.ajax({ url: "Model/lineChartPersonale.php",
      type: "POST",
      data:  "",
      success: function(data) {
         $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {                       

                   > series.data = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3,18.3, 13.9, 9.6];

                }
            });
        options.series.push(series);
        });
         var chart = new Highcharts.Chart(options);
          }, 
      error: function(response, error) {
          //
      }
  });

抱歉我的英文.....

Answer 2

您可以通过以下方式解析它：

JSON.parse(obj.data);

示例：

JSON.parse("[40, 30, 31, 29, 32, 35, 24, 32, 18, 41, 42, 6]")
[40, 30, 31, 29, 32, 35, 24, 32, 18, 41, 42, 6]