强调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"]
}]
我设法使用您的评论张贴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参考: