继续来学习统计图。上一篇文章写了一些HighCharts的使用功能。这篇文章咱来写一下一些优化的统计图的一些属性。

十字星线。 （crosshair）

首先，咱们来做一个比较使用的案例。数据点比较多的时候，需要有一条十字准星线来帮我们看的更清楚。

需要用在是X/Y轴的crosshair属性，crosshair对象有一个snaps属性 有两个值 true、false.true的是自动吸附点。false是当前鼠标的位置

如图：

Highcharts.chart('container', {
title:{
    text:'工资表'  //设置标题
},
credits:{
    enabled:false //是否开启版权
},
xAxis: {
   crosshair: {    //是否开启对准线
        snap:true
    },
    title:{
        text: '月份'
    },
    min:1             //最小值
},
yAxis: {
   crosshair: {
        snap:true
    },
    title:{
        text:'工资/元'
    }
},
series: [{name:'收入',
          data: [15000, 18798, 56874, 69857, 36541, 54678,64586, 69855, 78965, 96854, 63985, 89654,99999]
         }]
});

X/Y 轴标题位置

看到上面的图之后，咱们觉得X/Y轴的标题这样并不觉得很合适。咱们来给他换一下位置。 咱们来学学title对象的属性。

align: 坐标轴的对齐方式。 有 low、high、middle三个值。可以从字面都明白意思了。分别表示最小值、最大值、居中对齐。

offset:偏移。坐标轴标题对轴线的偏移。number rotation:旋转。坐标轴标题的选装角度。0 度为水平， 270 是竖直（从下往上）。 默认是：0. text:轴标题的文字。 x:水平偏移 Y：垂直偏移 下面咱们来调整一下标题的位置：

Highcharts.chart('container', {
title:{
    text:'工资表'
},
credits:{
    enabled:false
},
xAxis: {
    crosshair: {
        snap:true
    },
    title:{
        text: '月份',
        align:'high',
    },
    min:1
},
yAxis: {
    crosshair: {
        snap:true
    },
    title:{
        text:'工资/元',
        align:'high',
        rotation:0,
        y:-30,
        offset:0
    }
},
series: [{name:'收入',
          data: [15000, 18798, 56874, 69857, 36541, 54678,64586, 69855, 78965, 96854, 63985, 89654,99999]
         }]
});

轴线轴线。

咱来把Y轴线和刻度都弄出来，这样比较舒服一点。如图所示：

Highcharts.chart('container', {
title:{
    text:'工资表'
},
credits:{
    enabled:false
},
xAxis: {
    crosshair: {
        snap:true
    },
    title:{
        text: '月份',
        align:'high',
    },
    min:1
},
yAxis: {
    crosshair: {
        snap:true
    },
    tickPosition: 'outside',
    tickLength:10,   //刻度的长度
    tickWidth:1,    //刻度的宽度
    lineWidth:1,     //Y轴的轴宽度
    endOnTick:true,
    title:{
        text:'工资/元',
        align:'high',
        rotation:0,
        y:-30,
        offset:0
    }
},
series: [{name:'收入',
          data: [15000, 18798, 56874, 69857, 36541, 54678,64586, 69855, 78965, 96854, 63985, 89654,99999]
         }]
});

## 数据点的现实与取消 有的时候数据点多了，想要把他去掉。移动上来的时候才现实出来。 这里就需要配置一些数据列的东西。

Highcharts.chart('container', {
title:{
    text:'工资表'
},
credits:{
    enabled:false
},
xAxis: {
    crosshair: {
        snap:true
    },
    title:{
        text: '月份',
        align:'high',
    },
    min:1
},
yAxis: {
    crosshair: {
        snap:true
    },
    tickPosition: 'outside',
    tickLength:10,   //刻度的长度
    tickWidth:1,    //刻度的宽度
    lineWidth:1,     //Y轴的轴宽度
    endOnTick:true,
    title:{
        text:'工资/元',
        align:'high',
        rotation:0,
        y:-30,
        offset:0
    }
},
plotOptions: {  //数据列配置
    series: {  //通用数据列
        marker: { //数据点标记
            enabled: false // 填充颜色 为null的时候 会跟数据列的颜色
        }
    }
},
series: [{name:'收入',
          data: [15000, 18798, 56874, 69857, 36541, 54678,64586, 69855, 78965, 96854, 63985, 89654,99999]
         }]
});

highcharts还有很多好多的其他统计图的功能，大家如果想要深入了解的话，可以到官网去了解一下。里面有很详细的API，有的时候你不一定需要全部都记住，在自己做的时候，遇到不懂去查一下API就可以了。