如何在highcharts.js简单highcharts.chart图或.stockChart中将X轴设置为日期数组？

时间：2019-04-05 11:12:29

标签： javascript php html highcharts

我可以在mysql的表中成功绘制图表

    $sql = "SELECT TradeDate  as date, LScore2 as L FROM levermann_kurz WHERE Stock_short='MSFT' ORDER BY TradeDate desc";
    $stock2 = mysqli_query($mysqli,$sql);
    $stock2 = mysqli_fetch_all($stock2,MYSQLI_ASSOC);
    $stock2 = json_encode(array_column($stock2,'L'),JSON_NUMERIC_CHECK);

和身体

<script type="text/javascript">

// load("getdata.php")
var data_stock1 = <?php echo $stock1; ?>;
var data_stock2 = <?php echo $stock2; ?>;

                Highcharts.chart('container', {

                    title: {
                        text: 'Levermann Scores'
                    },

                    subtitle: {
                        text: 'TradeFlags'
                    },

//                    xAxis: {
//                        categories: dates
//                    },

                    yAxis: {
                        title: {
                            text: 'Levermann Score'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            },
                            //pointStart: 0
                        }
                    },

                    series: [{
                        name: 'AAPL',
                        data: data_stock1
                    }, {
                        name: 'MSFT',
                        data: data_stock2
 //                   }, {
 //                       name: 'External Data',
 //                       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                    }],

                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }

                });

        </script>               
    </body>

但是无法将Date数组显示为x轴 它只有值0、1、2、3、4等...

我在做什么错？如何在highchart图中设置x轴阵列？

我认为您可以简单地通过一个2列数组，第一列为Dates，第二列为Values？

请帮助！

我看过highcharts文档，但似乎没有向我解释如何将数据传递到图表容器。应该是哪种格式？

控制台日志：

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>

<div id="container" style="height: 400px; max-width: 800px"></div>



<script type="text/javascript">

// load("getdata.php")
var data_stock1 = [3,2,2,3,3,3,3,3,3,3,3,3,3,3,3,2,3,3,2,3,2,3,2,2,1,-1,0,0,0,0,0,1,1,0,0,-1,0,-1,-1,-1,-1,-1,0,0];
var data_stock2 = [2,3,2,2,2,2,2,2,2,2,2,2,2,1,2,2,3,2,3,3,1,2,0,2,2,2,1,2,2,2,2,2,2,1,2,2,1,2,2,2,2,1,1,2];
var data_datearray = ["2018-05-25","2018-06-01","2018-06-08","2018-06-15","2018-06-22","2018-06-27","2018-07-06","2018-07-20","2018-07-27","2018-08-03","2018-08-10","2018-08-17","2018-08-24","2018-08-31","2018-09-07","2018-09-14","2018-09-21","2018-09-28","2018-10-05","2018-10-12","2018-10-19","2018-10-26","2018-11-02","2018-11-09","2018-11-16","2018-11-23","2018-11-30","2018-12-07","2018-12-14","2018-12-21","2018-12-28","2019-01-04","2019-01-11","2019-01-18","2019-01-25","2019-02-01","2019-02-08","2019-02-15","2019-02-22","2019-03-01","2019-03-08","2019-03-15","2019-03-22","2019-03-29"];
//var seriesOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG'];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
//function createChart() {

    Highcharts.stockChart('container', {
///


                            title: {
                                    text: 'Levermann Scores'
                                    },


                            xAxis: {
                                    type: 'datetime',
                                    categories: data_datearray
                    },


                    series: [{
                        name: 'AAPL',
                        data: data_stock1
                    }, {
                        name: 'MSFT',
                        data: data_stock2
                    }]

////                    
//                    responsive: {
//                        rules: [{
//                            condition: {
//                                maxWidth: 500
//                            },
//                            chartOptions: {
//                                legend: {
//                                    layout: 'horizontal',
//                                    align: 'center',
//                                    verticalAlign: 'bottom'
//                                }
//                            }
//                        }]
//                    }

        });
// end of container }];
//}

console.log(data_stock1)
        </script>               
    </body>

我可以用两列将日期转换成这种格式，但是在图表中将无法使用

var data_dual = [{"date":"2018-05-25","L":"3"},{"date":"2018-06-01","L":"2"},{"date":"2018-06-08","L":"2"},{"date":"2018-06-15","L":"3"},{"date":"2018-06-22","L":"3"},{"date":"2018-06-27","L":"3"},{"date":"2018-07-06","L":"3"},{"date":"2018-07-20","L":"3"},{"date":"2018-07-27","L":"3"},{"date":"2018-08-03","L":"3"},{"date":"2018-08-10","L":"3"},{"date":"2018-08-17","L":"3"},{"date":"2018-08-24","L":"3"},{"date":"2018-08-31","L":"3"},{"date":"2018-09-07","L":"3"},{"date":"2018-09-14","L":"2"},{"date":"2018-09-21","L":"3"},{"date":"2018-09-28","L":"3"},{"date":"2018-10-05","L":"2"},{"date":"2018-10-12","L":"3"},{"date":"2018-10-19","L":"2"},{"date":"2018-10-26","L":"3"},{"date":"2018-11-02","L":"2"},{"date":"2018-11-09","L":"2"},{"date":"2018-11-16","L":"1"},{"date":"2018-11-23","L":"-1"},{"date":"2018-11-30","L":"0"},{"date":"2018-12-07","L":"0"},{"date":"2018-12-14","L":"0"},{"date":"2018-12-21","L":"0"},{"date":"2018-12-28","L":"0"},{"date":"2019-01-04","L":"1"},{"date":"2019-01-11","L":"1"},{"date":"2019-01-18","L":"0"},{"date":"2019-01-25","L":"0"},{"date":"2019-02-01","L":"-1"},{"date":"2019-02-08","L":"0"},{"date":"2019-02-15","L":"-1"},{"date":"2019-02-22","L":"-1"},{"date":"2019-03-01","L":"-1"},{"date":"2019-03-08","L":"-1"},{"date":"2019-03-15","L":"-1"},{"date":"2019-03-22","L":"0"},{"date":"2019-03-29","L":"0"}];

或使用UNIX_TIMESTAMP，我将日期格式转换为时间戳记：

var data_dual = [{"date":"1527206400","L":"3"},{"date":"1527811200","L":"2"},{"date":"1528416000","L":"2"},{"date":"1529020800","L":"3"},{"date":"1529625600","L":"3"},{"date":"1530057600","L":"3"},{"date":"1530835200","L":"3"},{"date":"1532044800","L":"3"},{"date":"1532649600","L":"3"},{"date":"1533254400","L":"3"},{"date":"1533859200","L":"3"},{"date":"1534464000","L":"3"},{"date":"1535068800","L":"3"},{"date":"1535673600","L":"3"},{"date":"1536278400","L":"3"},{"date":"1536883200","L":"2"},{"date":"1537488000","L":"3"},{"date":"1538092800","L":"3"},{"date":"1538697600","L":"2"},{"date":"1539302400","L":"3"},{"date":"1539907200","L":"2"},{"date":"1540512000","L":"3"},{"date":"1541116800","L":"2"},{"date":"1541721600","L":"2"},{"date":"1542326400","L":"1"},{"date":"1542931200","L":"-1"},{"date":"1543536000","L":"0"},{"date":"1544140800","L":"0"},{"date":"1544745600","L":"0"},{"date":"1545350400","L":"0"},{"date":"1545955200","L":"0"},{"date":"1546560000","L":"1"},{"date":"1547164800","L":"1"},{"date":"1547769600","L":"0"},{"date":"1548374400","L":"0"},{"date":"1548979200","L":"-1"},{"date":"1549584000","L":"0"},{"date":"1550188800","L":"-1"},{"date":"1550793600","L":"-1"},{"date":"1551398400","L":"-1"},{"date":"1552003200","L":"-1"},{"date":"1552608000","L":"-1"},{"date":"1553212800","L":"0"},{"date":"1553817600","L":"0"}];

但是在系列中使用此数组data_dual只会呈现带有空白的图表。

1 个答案:

答案 0 :(得分：0)

您需要使用datetime轴，并在数据数组的第一个元素中提供日期作为时间戳或Date对象：

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [
            [1262304000000, 29.9],
            [1267401600000, 71.5],
            [1270080000000, 106.4]
        ]
    }]
});

或作为对象：

series: [{
    data: [{
            x: 1262304000000,
            y: 29.9
        },
        {
            x: 1267401600000,
            y: 71.5
        },
        {
            x: 1270080000000,
            y: 106.4
        }
    ]
}]

实时演示：http://jsfiddle.net/BlackLabel/7tov823n/

API参考：https://api.highcharts.com/highcharts/series.column.data

相关问题
最新问题