highcharts图表常见问题：关于如何设置数据点起始位置为坐标原点的问题分析与总结篇独家爆料

从使用highcharts图表开始到如今也见证了很多使用者一直困惑着这样一个问题：如何才能够设置第一个数据点从坐标原点开始？要在什么条件下才能够从原点开始画？

针对这样一个问题，我一直没有过多地去深入了解，今天也正式有一个朋友遇到这样一个问题。所以，决定将自己的使用心得总结如下。

1、尚未设置xAxis的categories

在我们尚未设置任何categories数据的情况下，让图表自动给x轴分配刻度，你会发现我们不设置任何xAxis的其他属性，第一个数据点在x轴上的位置就是在原点位置。

2、当我们人为设置了xAxis的categories

一旦设置了categories数据过后，不管你设置了xAxis的min、minRange、minPadding 均为0也无济于事，第一个数据点与Y轴的距离还是有一些。

变相思考：

1、不设置categories，其实就是自动给x轴刻度分配了0、1、2、3、n的刻度值和刻度角标一样的。

2、我们想要的无非是想将我们自己的刻度显示在x轴上和tooltip内。

3、那么我们何不巧用xAxis的labels的formatter格式化方法来做这个刻度的真正变换呢？

实际操作：

1、如何让y轴方向上从原点开始？

想要让数据点从原点开始，需要做的就是要控制数据点的x轴方向和y轴方向。关于y轴方向的控制，我们只需要配置两个属性即可：

1）、startOnTick:用于设置是否显示开始刻度，默认为true，我们需要设置此属性值为false。

2）、minPadding：用于设置最小值与X轴的距离值，默认为非0，我们需要设置此属性值为0。

示例配置代码：

yAxis: { minPadding:0, startOnTick:false },

2、如何让X轴方向上从原点开始？

根据前面”变相思考“小结，我们需要这样做：

1）、将categories定义成为一个一维数组。

var categories =  ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];

2）、巧用labels的formatter格式化方法根据当前刻度值角标去categories数组内对应获取想要体现的刻度值。

labels: {                     formatter: function() {                         return categories[this.value];                     }                 },

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

xAxis: {                       labels: {                     formatter: function() {                         return categories[this.value];                     }                 },             tickInterval:1          },

这样一来，我们就可以完美体现不管xAxis的categories是什么数据均可将其第一个数据点设置为从原点开始。

晒上一张效果图：

完整示例代码如下所示：

$(function () {    var categories =  ['一月', '二月', '三月',                     '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];          $('#container').highcharts({         xAxis: {                       labels: {                     formatter: function() {                         return categories[this.value];                     }                 },             tickInterval:1          },         yAxis: {             minPadding:0,             startOnTick:false         },         credits:{             text:"www.stepday.com",             url:"http://www.stepday.com",             style:{                 color:"red"             }         },         series: [{             data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]                 }]     }); }); 

在线Demo查看下载：http://jsfiddle.net/stepday/yVG7R/

【另一种可行的方式】：

xAxis: {             min:0,             max:12,             tickInterval:1         },         yAxis: {             min:0,             lineWidth:1,             minPadding:0,             plotLines: [{                 value: 0,                 width: 1,                 color: '#808080'             }]         },