关于Highcharts的x轴密密麻麻的时间格式显示问题解决方法
2013-06-19 12:23
856 查看
把X轴改为这样 xAxis: { categories:obj.tdate, //x轴显示格式['0000-00-00','0000-00-00','0000-00-00','0000-00-00','4','5'] labels: {step:2,rotation: -25, align: 'right', style: { font: 'normal 13px Verdana, sans-serif'}} },
例子
function chart_line_basic(renderTo, categories, series, legendEnabled) { this.renderTo = renderTo; this.series = series; this.categories = categories; this.legendEnabled = legendEnabled; this.step=0; this.rotation=0; if(categories.length>4) { this.step=2; this.rotation=25; } } chart_line_basic.prototype.formatterTooltip = function () { } chart_line_basic.prototype.showChart = function () { var chart; chart = new Highcharts.Chart({ chart: { renderTo: this.renderTo, type: 'line', // marginRight: 130, // marginBottom: 25 }, title: { text: '', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { labels:{ step:this.step, rotation: this.rotation }, categories: this.categories }, yAxis: { title: { text: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: this.formatterTooltip }, legend: { floating: true, layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 20, borderWidth: 0, enabled: this.legendEnabled }, series: this.series }); };
<script type="text/javascript"> $(function () { var renderTo = "container_1"; //如果没有可以用NULL表示:空 ,而0表示从0开始 var series = [{ name: 'Tokyo', data: [7.0, 6.9, null, 14.5, 18.2, 21.5, 25.2, 26.5]}]; var categories = ['一周', '二周', '三周', '四周', '五周', '六周', '七周', '八周']; var legendEnabled = true; var _line_basic = new chart_line_basic(renderTo, categories, series, legendEnabled); _line_basic.formatterTooltip = function () { return this.x + ': ' + this.y + '%'; } _line_basic.showChart(); }); </script>
<div id="container_1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
相关文章推荐
- Pentaho PDI 数据导入关于时间格式及重复数据处理这2个问题的解决方法
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
- 关于PhotoShop中保存CMYK格式TIFF文件在GDI+错误地显示颜色的问题解决方法
- json格式的时间显示Date问题解决方法
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决方法
- 关于友善之臂mini2440串口接超级终端输入显示乱码问题的解决方法
- 关于vsftpd下显示的修改时间与系统时间不一致的解决方法
- vb6.format() 时间格式时出问题!解决方法
- 解决DataGrid显示时间格式问题
- .NET:关于byte数组在用StreamWriter文件写出后出现多余字符的解决方法及VS方案文件图标显示问题
- 关于图片资源在android2.1/2.2/2.3下无法显示的问题以及解决方法
- 关于在Android中使用Google Map只显示网格问题的解决方法
- 关于vsftpd下显示的修改时间与系统时间不一致的解决方法
- 关于Oracle中设置缺省时间显示格式的问题
- 关于tensorboard的使用不显示的问题解决方法
- 关于excel 导出数字类型变成科学记数法的问题解决 导出EXCEL后格式的问题 科学记数法 显示
- 关于时间显示为今天、昨天、星期一之类的格式问题
- (2010-07-14)关于Oracle中设置缺省时间显示格式的问题
- 关于java 和 android 下获取指定时间是本年第几周不一致问题的解决方法
- 关于spss显示“试图连接远程服务器失败”的问题以及解决方法