如何解决Highcharts范围选择器不适用于多个系列
我有一个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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。