出于某种原因,我似乎无法让这与高库存范围选择器工作。导航器和范围选择器未显示正确的数据组。默认的数据分组不起作用。数据在图表中显示正确:
如您所见,单击“导航器缩放”面板时,数据分组不起作用。而且列没有增加
http://marialaustsen.com/htdocs/index.html
我错过了什么?
非常感谢
php脚本pdo调用
//Checking if a request has been made
if( isset( $_POST ) ) {
//Establishing connection and retrieving the data
try {
$con = new PDO( 'mysql:dbname=output;host=localhost', 'root', 'root' );
$results = $con->query( 'SELECT sent_ecards, date FROM details ORDER BY details.date' );
} catch ( PDOException $e ) {
echo 'Connection failed: ' . $e->getMessage();
}
if( isset( $results ) ) {
$data = [];
$categories = [];
$combined = [];
foreach( $results as $row ) {
array_push( $categories, $row['date'] );
array_push( $data, (int) $row['sent_ecards'] );
}
array_push( $combined, $data );
array_push( $combined, $categories );
header( 'Content-Type: application/json' );
echo json_encode( $combined );
}
}
索引文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Send eCards</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 800px;"></div>
<button data-action="retrieve_data">Retrieve New Data</button>
<script>
$(document).ready(function() {
//Sending request to the server on button click
$( '[data-action="retrieve_data"]' ).on( 'click', function( e ) {
e.preventDefault();
$.ajax({
url: 'retrieve-data.php',
type: 'POST',
//async: true,
//dataType: "json",
success: function( data ) {
console.log( data );
var axis = $( '#container' ).highcharts().get( 'datetime' ),
series = $( '#container' ).highcharts().get( 'rewards' );
axis.setCategories( data[1], false );
series.setData( data[0], false );
$( '#container' ).highcharts().redraw();
},
})
//Initializing basic chart configuration object
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column',
alignTicks: false
},
title: {
text: 'Send ecards'
},
rangeSelector: {
selected: 1
},
xAxis: {
type: 'datetime',
tickInterval:24 * 3600 * 1000 * 365,
labels: {
formatter: function () {
return Highcharts.dateFormat('%b \'%y', this.value);
}
},
title: {
text: 'Date'
},
id: 'datetime'
},
yAxis: {
title: {
text: 'Amount of ecards'
}
},
tooltip: {
valueSuffix: ' K',
useHTML: true,
crosshairs: true,
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
formatter: function () {
return Highcharts.dateFormat('%A, %b %e, %Y', this.x);
},
},
series: [{
name: 'ecards',
id: 'rewards',
data: [],
pointInterval: 24*3600*1000,
pointStart: Date.UTC(2010,0,1)
}],
});
//$( '#container' ).(chartConfigOptions);
});
});
</script>
</body>
</html>
控制台中的数据数组:
(2) [Array(1999), Array(1999)]
0
:
(1999) [843, 2, 544, 81, 45, 12, 454, 81, 45, 466, 3557, 578, 5, 3434, 65, 843, 3435, 544, 65, 843, 4324, 454, 323, 45, 3435, 544, 323, 45, 2, 546, 323, 45, 739, 3557, 342, 235, 2, 546, 342, 235, 565, 342, 235, 2432, 56, 3456, 2432, 56, 2432, 4543, 5, 3456, 2311, 5, 2839, 565, 5, 2839, 65, 4927, 2, 565, 7, 2, 544, 863, 29, 4324, 454, 5, 346, 466, 565, 5, 346, 2311, 454, 264, 68, 343, 546, 29, 4324, 454, 546, 29, 235, 565, 34, 346, 4324, 454, 34, 346, 739, 3557, 34, 346, 98, 454, …]
1
:
(1999) ["01/01/2010", "01/01/2011", "01/01/2012", "01/01/2013", "01/01/2014", "01/01/2015", "01/02/2010", "01/02/2011", "01/02/2012", "01/02/2013", "01/02/2014", "01/02/2015", "01/03/2010", "01/03/2011", "01/03/2012", "01/03/2013", "01/03/2014", "01/03/2015", "01/04/2010", "01/04/2011", "01/04/2012", "01/04/2013", "01/04/2014", "01/04/2015", "01/05/2010", "01/05/2011", "01/05/2012", "01/05/2013", "01/05/2014", "01/05/2015", "01/06/2010", "01/06/2011", "01/06/2012", "01/06/2013", "01/06/2014", "01/06/2015", "01/07/2010", "01/07/2011", "01/07/2012", "01/07/2013", "01/07/2014", "01/08/2010", "01/08/2011", "01/08/2012", "01/08/2013", "01/08/2014", "01/09/2010", "01/09/2011", "01/09/2012", "01/09/2013", "01/09/2014", "01/10/2010", "01/10/2011", "01/10/2012", "01/10/2013", "01/10/2014", "01/11/2010", "01/11/2011", "01/11/2012", "01/11/2013", "01/11/2014", "01/12/2010", "01/12/2011", "01/12/2012", "01/12/2013", "01/12/2014", "02/01/2010", "02/01/2011", "02/01/2012", "02/01/2013", "02/01/2014", "02/01/2015", "02/02/2010", "02/02/2011", "02/02/2012", "02/02/2013", "02/02/2014", "02/02/2015", "02/03/2010", "02/03/2011", "02/03/2012", "02/03/2013", "02/03/2014", "02/03/2015", "02/04/2010", "02/04/2011", "02/04/2012", "02/04/2013", "02/04/2014", "02/04/2015", "02/05/2010", "02/05/2011", "02/05/2012", "02/05/2013", "02/05/2014", "02/05/2015", "02/06/2010", "02/06/2011", "02/06/2012", "02/06/2013", …]
暂无答案!
目前还没有任何答案,快来回答吧!