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

http://www.stepday.com/topic/?923

多谢大神@www.stepday.com站长 提供！！！

从使用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'
            }]
        },