最近刚完成的新项目已经上线,闲下来尝试优化细节问题。第一步页面的图表插件,赶项目的时候匆匆忙忙,许多图表的问题没来得及去解决。先把问题抛出:

数据点的起始点和结束点  都位于坐标轴的中间点,想要达到的效果:数据点起始位置是坐标的原点,结束位置是坐标轴的末端,以此为背景。

 

操作步骤:

1、y轴方向从原点开始:

yAxis: {  
  minPadding:0,  
  startOnTick:false  
}

2、x轴方向从原点开始:

var categories=["2017.1.27","2017.8.28"];    //先定义categories数组

//labels的formatter格式化方法根据当前刻度值角标去categories数组内对应获取想要体现的刻度值
ops.xAxis.labels={
formatter:function(){
return categories[this.value];
}
};

//为了让刻度不出现间断效果,我们在设置一下刻度间隔属性tickInterval为1

ops.xAxis.tickInterval=1;

 完成这两步,最终达到效果:数据点以原点为起始坐标点

  

xAxis的labels对象用来设置轴标签 的内容,

formatter:function   坐标轴格式化回调函数,函数里,坐标轴的值可以通过this.value获取

xAxis:{
  labels:{
    formatter:function(){  //坐标轴格式化回调函数
      return this.value
    }   } }

了解详细的信息,附上网址一个:https://api.hcharts.cn/highcharts#xAxis.labels.formatter

posted on 2017-02-27 15:15  factor  阅读(5693)  评论(0编辑  收藏  举报