我的高画没有显示价值?它显示 X 轴，但不显示样条图值

Question

>强调文本如果有人能指出我正确的方向。我相信很接近。我的高图显示正确的 X 轴值，但样条图本身没有显示在高图中。我正在生成 json 值，但不确定它是否编码为序列数据：[数据] 在高图表中？

 $.getJSON("/saas/js/OMLine.php", function(json) {
  $('#OMLine').highcharts({
 //Highcharts.chart('OMLine', {
legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
    marginTop: 50,
     marginBottom: 80
},
exporting:{enabled:false},

title: {
    text: 'Operating Margin'
},

yAxis: {
    min: null,
    allowDecimals: true,
    title: {
        text: ''
    },
    labels: {
        format: '${value}'
    },
},
chart: {
    renderTo: 'chart',
    type: 'spline'
},
plotOptions: {
    series: {
        lineWidth: 3,
        marker: {
            fillColor: '#3195d2',
            lineWidth: 2,
            lineColor: '#fff',
            radius: 6
        }
    }
},
credits: {
  enabled: false
},

colors: ['#3195d2'],
 xAxis: {
    categories:json [0]['data']
},

 series: [{
name: 'Operating Margin',
type: 'spline',
    data:  json[0]['data']
  }]

    });
    });

/---------------------------------以上为.js页---/

 <?php
 session_start();
 require_once '../authenticate/tests/dbconnect.php';
 $displayMonth = $_SESSION["selectedMonth"];
 //echo $displayMonth;
 $displayYear = $_SESSION["selectedYear"];
 //echo $displayYear;
 $xaxis = array();
 $xaxis_linerows = array();

 for ($i = 1; $i <= 12; $i++) {
     if($displayMonth == 1){
         $axisDisplayMonth = "Jan";
     } else if($displayMonth == 2){
         $axisDisplayMonth = "Feb";
     } else if($displayMonth == 3){
         $axisDisplayMonth = "Mar";
     } else if($displayMonth == 4){
         $axisDisplayMonth = "Apr";
     } else if($displayMonth == 5){
         $axisDisplayMonth = "May";
     } else if($displayMonth == 6){
         $axisDisplayMonth = "Jun";
     } else if($displayMonth == 7){
         $axisDisplayMonth = "Jul";
     } else if($displayMonth == 8){
         $axisDisplayMonth = "Aug";
     } else if($displayMonth == 9){
    $axisDisplayMonth = "Sep";
     } else if($displayMonth == 10){
    $axisDisplayMonth = "Oct";
     } else if($displayMonth == 11){
    $axisDisplayMonth = "Nov";
     } else if($displayMonth == 12){
    $axisDisplayMonth = "Dec";
     }

 $query=mysqli_query($conn,"SELECT * FROM `PNLAVG` WHERE `month` =           '".$displayMonth."' AND `year` = '".$displayYear."' AND `xeroOrgID` = '".$_SESSION["companyName"]."' AND `month` <> 0");
      $col = mysqli_fetch_assoc($query);
 $colfrac = number_format($col['OM'],2);
 //echo $colfrac;
 $xaxis_linerows['data'][]  =  $colfrac;

 $xaxis['data'][] = $axisDisplayMonth."-".substr($displayYear, 2);
     $displayMonth = $displayMonth - 1;
     if($displayMonth == 0){
    $displayMonth = 12;
    $displayYear = $displayYear - 1;
     }
 } 
 $xaxis_linerows['data'] = array_reverse($xaxis_linerows['data']);
 //print_r( $xaixs_linerows['data']);
 $xaxis['data'] = array_reverse($xaxis['data']);
 $result = array();
 array_push($result,$xaxis);
 array_push($result,$xaxis_linerows);

 print json_encode($result);
 //print json_encode($xaixs_linerows);
 //JSON_NUMERIC_CHECK
 ?>

/----PHP 页面推送 json 值---/

JSON 编码的结果

[{
    "data": ["Jun-17", "Jul-17", "Aug-17", "Sep-17", "Oct-17", "Nov-17", "Dec-17", "Jan-18", "Feb-18", "Mar-18", "Apr-18", "May-18"]
}, {
    "data": ["-2.46", "-0.27", "0.83", "-1.58", "-0.60", "0.65", "0.06", "-0.83", "0.07", "0.26", "0.16", "0.24"]
}]

Answer 1

我设法使用您在评论中发布的 JSON 重现了您的图表。问题是您正在传递字符串而不是数字来series.data。更重要的是"3,547.33"在js中不是一个有效的数字，它应该只是3547.33。检查下面发布的代码和演示。

法典：

var json = '[{"data":["Feb-18","Mar-18","Apr-18","May-18","Jun-18","Jul-18","Aug-18","Sep-18","Oct-18","Nov-18","Dec-18","Jan-19"]},{"data":[3547.33,3090.58,3320.84,5817.88,27046.50,12912.20,8289.36,7493.51,7493.73,6493.29,3142.83,4003.42]}]';
var data = JSON.parse(json);
Highcharts.chart('container', {
  chart: {
    renderTo: 'chart',
    type: 'spline'
  },
  legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
    marginTop: 50,
    marginBottom: 80
  },
  exporting: {
    enabled: false
  },
  title: {
    text: 'Operating Margin'
  },
  yAxis: {
    min: null,
    allowDecimals: true,
    title: {
      text: ''
    },
    labels: {
      format: '${value}'
    },
  },
  plotOptions: {
    series: {
      lineWidth: 3,
      marker: {
        fillColor: '#3195d2',
        lineWidth: 2,
        lineColor: '#fff',
        radius: 6
      }
    }
  },
  credits: {
    enabled: false
  },
  colors: ['#3195d2'],
  xAxis: {
    categories: data[0].data
  },
  series: [{
    name: 'Operating Margin',
    type: 'spline',
    data: data[1].data
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

演示：

• https://jsfiddle.net/BlackLabel/eLjzgmn3/

接口参考：

• https://api.highcharts.com/highcharts/series.spline.data