我highart不显示值?它显示x轴而不是花键曲线值?

问题描述 投票:-1回答:1

强调textIf任何人都可以点我正确的direction.I believie我靠近。我的高图表显示具有正确的x轴的值,但花键图形本身不会出现在highchart。我生成的JSON值,但不知道它被编码成一系列的数据:在highcharts [数据]?

 $.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"]
}]
javascript php html highcharts
1个回答
0
投票

我设法使用您的评论张贴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>

演示:

API参考:

© www.soinside.com 2019 - 2024. All rights reserved.