Highcharts范围选择器不适用于多个系列

编程问答 2022-10-27

问题描述

我有一个highchart / highstock，可以从PHP文件中获取数据。我的问题是，如果我使用多个系列，则RangeSelector按钮不起作用（在示例中1h buttno（1小时）应该起作用。示例：https://jsfiddle.net/mymarcelsql/8xL34qyk/15/

那是我的文件

<?PHP
require("PHP/00connection.PHP");

$sql =  $conn->query("SELECT read_tickets,write_tickets,epoch_time FROM tickets_available ORDER BY epoch_time;")->fetchAll();

foreach ($sql as $row) {
    $read_tickets[] = $row['read_tickets'];
    $write_tickets[] = $row['write_tickets'];
}
?>

<script type="text/javascript">

$(document).ready(function() {
 
        var categoriesDate = [ <?PHP foreach ($sql as $row) { ?>
                                '<?PHP $date = $row['epoch_time'] / 1000; echo (date('Y-m-d H:i',$date)) ?>',<?PHP } ?>
                            ];

        var seriesReadTickets = [ <?PHP echo join($read_tickets,',') ?> ];
        var seriesWriteTickets = [ <?PHP echo join($write_tickets,') ?> ];
 
        var options ={
            chart: {
                renderTo: 'tickets',type: 'line',zoomType: 'x',setSize: 400
            },title: {
                text: "Memory"  
            },xAxis: {
                categories: categoriesDate,title: {
                    text: "Datetime"
                },type:'datetime',labels: {
            format: '{value:%Y-%m-%d %H:%M}',}
            },yAxis: {    
                title: {
                    text: 'Available Tickets'
                }
            },rangeSelector: {
               enabled: true,inputEnabled: false,buttonPosition: {
                 align: 'right'
                },labelStyle: {
                    display: 'none'
                },buttons: [
                    {
                        type: 'hour',count: 1,text: '1h'
                    },{
                        type: 'day',text: '1d'
                    },{
                        type: 'month',text: '1m'
                    },count: 6,text: '6m'
                    },{    
                        type: 'year',text: '1y'
                    },{
                        type: 'all',text: 'All'
                    }

                ]
            },tooltip: {
                //crosshairs: true,shared: true,valueSuffix: '',xDateFormat: '%Y-%m-%d %H:%M'
             },series: [{         
                 name: 'Read Tickets',data: seriesReadTickets
        },{
            name: 'Write Tickets',data: seriesWriteTickets
        }]
        };
        var chart = new Highcharts.Chart(options); 
    });
    
    
</script>

但是，如果我只使用一个系列，按钮将正常工作。

感谢您的帮助！

解决方法

使用xAxis.categories自动将轴的类型设置为category，并且范围选择器功能仅适用于datetime轴类型。

您需要将数据转换为[x,y]格式，并使用datetime轴类型。

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

chartshighchartshtmljavascript