highcharts: 设置数据点起始位置为坐标原点

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

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

 

操作步骤：

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

转载于:https://www.cnblogs.com/lilingyu-l/p/6474296.html