如何解决Highcharts双X轴图表未缩放轴
我正在尝试使用Hightcharts
创建双x轴图表,以便可以相互映射两个序列。但是我很困惑,因为该系列带有不同的间隔数据。该系列是:
Flow Rate - taken every 15 mins. - 96 data points,wanted as line chart
Usage - taken every hour. - 24 data points,wanted as bar chart
我一直在尝试with this fiddle,以使其正常工作,但我一直发现15分钟间隔系列并没有完全按小时添加到图表中。
或者使用linkedTo
属性,我只能得到一半带有柱线的图表。
谢谢您的建议。
这是我的代码:
Highcharts.chart('container',{
chart: {
zoomType: 'xy'
},title: {
text: 'Usage Vs Flow Rate Example'
},xAxis: [{
categories: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],crosshair: true,width: '100%',},{
categories: ['00:00','00:15','00:30','00:45','01:15','01:30','01:45','02:15','02:30','02:45','03:15','03:30','03:45','04:15','04:30','04:45','05:15','05:30','05:45','06:15','06:30','06:45','07:15','07:30','07:45','08:15','08:30','08:45','09:15','09:30','09:45','10:15','10:30','10:45','11:15','11:30','11:45','12:15','12:30','12:45','13:15','13:30','13:45','14:15','14:30','14:45','15:15','15:30','15:45','16:15','16:30','16:45','17:15','17:30','17:45','18:15','18:30','18:45','19:15','19:30','19:45','20:15','20:30','20:45','21:15','21:30','21:45','22:15','22:30','22:45','23:00','23:15','23:30','23:45'],opposite: true,}],yAxis: [{ // Primary yAxis
labels: {
format: '{value} L/m',style: {
color: Highcharts.getOptions().colors[1]
}
},title: {
text: 'Flow Rate',style: {
color: Highcharts.getOptions().colors[1]
}
}
},{ // Secondary yAxis
title: {
text: 'Usage',style: {
color: Highcharts.getOptions().colors[0]
}
},labels: {
format: '{value} L',opposite: true
}],tooltip: {
shared: false
},legend: {
layout: 'vertical',align: 'left',x: 120,verticalAlign: 'top',y: 10,floating: true,backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,0.25)'
},series: [{
name: 'Usage',type: 'column',xAxis: 1,yAxis: 1,data: [84,66,54,39,99,84,17,38,63,35,5,48,91,98,21,23,57,83,58,89],tooltip: {
valueSuffix: ' L'
}
},{
name: 'Flow Rate',type: 'line',data: [10,2,3,1,10,9,4,8,7,6,5],tooltip: {
valueSuffix: ' L/m'
}
}]
});
解决方法
您是否考虑过使用pointStart
和pointInterval
功能来获得想要的结果?
这是我的想法的简化演示:https://jsfiddle.net/BlackLabel/fesnwyp0/
xAxis: [{
type: 'datetime',crosshair: true,},{
type: 'datetime',opposite: true,}],
API:https://api.highcharts.com/highcharts/series.line.pointStart
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。