ncepubbs126 2012-02-07 08:28
浏览 538
已采纳

一个关于Highcharts图形显示(坐标轴)的问题,真的研究了好长时间

各位好!

这个问题困扰了我很长时间,无奈怎样研究也不得其中要领。
我现在在做一个趋势图形的显示,简述如下:从数据库中得出一天的历史数据,这些数据隔15分钟一次,故共有96个点。
图形显示没问题,就是坐标轴显示有问题,主要是X轴的问题。

显示的曲线我截了个图,在附件中。

其中X轴的属性我是这么设置的
[code="java"]
xAxis: {
maxZoom:3600000,
startOnTick:'yes',
endOnTick:'yes',
minorTickInterval: 'auto',//设置是否出现纵向小标尺
minorGridLineColor:'#E0E0E0',
lineColor: '#197F07',//设置X轴颜色
tickWidth: 1,//设置X轴坐标点是否出现占位及其宽度
tickPixelInterval:40,//设置横坐标密度
gridLineColor: '#E0E0E0',//设置纵向标尺颜色
gridLineWidth: 1,//设置纵向标尺宽度
title: {
text: '时段(计时点)'
}
},
[/code]

一般来说,可以在Axis内写入categories的值,这样就可以默认为x轴的坐标。如下
[code="java"]
Axis: {
categories: <%=xAxisstr%>,//xAxisstr为时间hh:mm
},
[/code]

但是我发现,这样写根本不可行,挤在一起密密麻麻,用tickPixelInterval属性也没用。

我想在X轴显示:00:00,01:00...,24:00这样整点的标记,但是不知道怎么弄,上面那个代码,显示为:-5,0,5,10.....90,95,我也不知道为什么是从-5开始的。

另外大家还会知道,highcharts的tooltip功能,可以把鼠标放在曲线上,可以显示一些信息。

[code="java"]
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+this.x +': '+ this.y;
}
},
[/code]

苦于这里面的this.x需要在“Axis:”里面说明categories的值,而我说明categories的值的前提下,X轴又显示不好了,所以就把this.x删除了,改为如下,始终觉得不完美:
[code="java"]
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+this.y;
}
},
[/code]

说了这么多,也不清楚说明白了没有。希望有大虾能看一下如何解决!谢谢谢谢!

  • 写回答

4条回答 默认 最新

  • xiaomaovip2 2012-02-07 16:54
    关注

    xAxis:{
    labels:{
    step:2;
    }
    }
    你可通过设置labels里面的step属性X轴显示的间隔。上面就是间隔2显示

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办