使用Kissy Charts 和 HighCharts 绘图时X轴文本叠在一起的解决方案

现在的位置: 首页 > 综合 > 正文

RSS

使用Kissy Charts 和 HighCharts 绘图时X轴文本叠在一起的解决方案

2013年12月01日 ⁄ 综合 ⁄ 共 3095字 ⁄ 字号小中大 ⁄ 评论关闭

前言：最近项目中使用到 kcharts(Kissy Charts)来绘制图表时，需要展示近两天内每5分钟时间内的某种产品的数量变化；绘制图表还可以，但是x轴的时刻（HH:ss)太密集了，显示在一起了，经过探索终于找到解决方案，在此总结下。

kcharts： http://v.idcnc.com.cn/webapp/index.php

先展示下，出现问题的图片：

分析问题：发现x轴显示的文本太密集，要是能间隔显示就好了。查找kissy的文档良久，终于找到。

解决方案：

在xLabels属性里加入 template属性即可。不过文档里没有详细说明，试用了才发现的。

xLabels:{
        css:{
          "font-family":"Microsoft Yahei",
           "font-size":"10px"
        },
        template:function(index,text){
            if(index % 7 == 0){ //每隔7个输出一次
              return text;
            }else{
              return "";
            }
        }
      },

修改后效果如下：

因为kcharts与highcharts类似，同时比较了下highcharts绘图效果，highcharts的x轴文本重叠解决方案：

 xAxis: {
			            	labels:{
			            		step: 6
			            		},
			                categories: [
			           				  '00:03', '00:08', '00:13', '00:18', '00:23', '00:28', '00:33', '00:38', '00:43', '00:48', '00:53', '00:58', '01:03', '01:08', '01:13', '01:18', '01:23', '01:28', '01:33', '01:38', '01:43', '01:48', '01:53', '01:58', '02:03', '02:08', '02:13', '02:18', '02:23', '02:28', '02:33', '02:38', '02:43', '02:48', '02:53', '02:58', '03:03', '03:08', '03:13', '03:18', '03:23', '03:28', '03:33', '03:38', '03:43', '03:48', '03:53', '03:58', '04:03', '04:08', '04:13', '04:18', '04:23', '04:28', '04:33', '04:38', '04:43', '04:48', '04:53', '04:58', '05:03', '05:08', '05:13', '05:18', '05:23', '05:28', '05:33', '05:38', '05:43', '05:48', '05:53', '05:58', '06:03', '06:08', '06:13', '06:18', '06:23', '06:28', '06:33', '06:38', '06:43', '06:48', '06:53', '06:58', '07:03', '07:08', '07:13', '07:18', '07:23', '07:28', '07:33', '07:38', '07:43', '07:48', '07:53', '07:58', '08:03', '08:08', '08:13', '08:18', '08:23', '08:28', '08:33', '08:38', '08:43', '08:48', '08:53', '08:58', '09:03', '09:08', '09:13', '09:18', '09:23', '09:28', '09:33', '09:38', '09:43', '09:48', '09:53', '09:58', '10:03', '10:08', '10:13', '10:18', '10:23', '10:28', '10:33', '10:38', '10:43', '10:48', '10:53', '10:58', '11:03', '11:08', '11:13', '11:18', '11:23', '11:28', '11:33', '11:38', '11:43', '11:48', '11:53', '11:58', '12:03', '12:08', '12:13', '12:18', '12:23', '12:28', '12:33', '12:38', '12:43', '12:48', '12:53', '12:58', '13:03', '13:08', '13:13', '13:18', '13:23', '13:28', '13:33', '13:38', '13:43', '13:48', '13:53', '13:58', '14:03', '14:08', '14:13', '14:18', '14:23', '14:28', '14:33', '14:38', '14:43', '14:48', '14:53', '14:58', '15:03', '15:08', '15:13', '15:18', '15:23', '15:28', '15:33', '15:38', '15:43', '15:48', '15:53', '15:58', '16:03', '16:08', '16:13', '16:18', '16:23', '16:28', '16:33', '16:38', '16:43', '16:48', '16:53', '16:58', '17:03', '17:08', '17:13', '17:18', '17:23', '17:28', '17:33', '17:38', '17:43', '17:48', '17:53', '17:58', '18:03', '18:08', '18:13', '18:18', '18:23', '18:28', '18:33', '18:38', '18:43', '18:48', '18:53', '18:58', '19:03', '19:08', '19:13', '19:18', '19:23', '19:28', '19:33', '19:38', '19:43', '19:48', '19:53', '19:58', '20:03', '20:08', '20:13', '20:18', '20:23', '20:28', '20:33', '20:38', '20:43', '20:48', '20:53', '20:58', '21:03', '21:08', '21:13', '21:18', '21:23', '21:28', '21:33', '21:38', '21:43', '21:48', '21:53', '21:58', '22:03', '22:08', '22:13', '22:18', '22:23', '22:28', '22:33', '22:38', '22:43', '22:48', '22:53', '22:58', '23:03', '23:08', '23:13', '23:18', '23:23', '23:28', '23:33', '23:38', '23:43', '23:48', '23:53', '23:58' 
			                          ]
			            },

绘图效果如下：