highstock从mysql数据库获取数据

dy1byipe  于 2021-06-21  发布在  Mysql
关注(0)|答案(0)|浏览(236)

出于某种原因,我似乎无法让这与高库存范围选择器工作。导航器和范围选择器未显示正确的数据组。默认的数据分组不起作用。数据在图表中显示正确:
如您所见,单击“导航器缩放”面板时,数据分组不起作用。而且列没有增加
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", …]

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题