hichart中,让折线图从原点开始

横坐标为数字:

var chart = new Highcharts.Chart({
    chart:{//图表区用于设置图表区的相关属性
        renderTo: 'content',//图表放置的容器,一般在HTML中放置一个DIV,获取DIV的id属性
        type: 'line',//设置图表样式,可以为line,spline,scatter,splinearea bar,pie,area,column
        //defaultSeriesType: 'column',//图表的默认样式
        //margin: [21,23,24,54],//整个图表的位置(上下左右的空隙)
        marginRight: 130,//右边间距
        marginBottom: 25//底部间距

    },
    title: {//用于图表标题的相关属性
        text: 'Monthly Average Temperature',//标题文本内容
        x: -20//center设置标题的位置

    },
    subtitle: {//副标题属性,与title大致相同,因为text选项默认为‘’,即为空,所以默认情况下subtitle默认不显示
        text: 'Source: WorldClimate.com',
        x: -20//设置副标题的位置
    },
    xAxis: {//设置图表X轴的相关属性
        min : 0
    },
    yAxis: {//设置图表Y轴的相关属性
        title: 'Temperature(°C)',//Y轴名称
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {//数据点提示框,设置当鼠标滑向数据点时显示的提示框信息。
        formatter: function(){//回调函数,用于格式输出提示框的显示内容
            return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';
        }
    },
    legend: {//设置图例的相关属性,应该是提示框的位置设置
        layout: 'vertical',//显示形式,支持水平horizontal和垂直vertical

        align: 'right',//对齐方式
        verticalAlign: 'top',//水平的对齐方式
        x: -10,
        y: 100,
        borderWidth: 0
    },
    series: [{//设置图表中要展示的数据
        name: 'Tokyo',//显示数据列的名称。
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {//data在图表中的数据列,可以为数组或者JSON格式的数据
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]


});

注意:就是将xAxis中的最小值改为0就行了,min : 0

横坐标为字符串:

var categories = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];//设置X轴分类名称,是数组
var chart = new Highcharts.Chart({
    chart:{//图表区用于设置图表区的相关属性
        renderTo: 'content',//图表放置的容器,一般在HTML中放置一个DIV,获取DIV的id属性
        type: 'line',//设置图表样式,可以为line,spline,scatter,splinearea bar,pie,area,column
        //defaultSeriesType: 'column',//图表的默认样式
        //margin: [21,23,24,54],//整个图表的位置(上下左右的空隙)
        marginRight: 130,//右边间距
        marginBottom: 25//底部间距

    },
    title: {//用于图表标题的相关属性
        text: 'Monthly Average Temperature',//标题文本内容
        x: -20//center设置标题的位置

    },
    subtitle: {//副标题属性,与title大致相同,因为text选项默认为‘’,即为空,所以默认情况下subtitle默认不显示
        text: 'Source: WorldClimate.com',
        x: -20//设置副标题的位置
    },

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

    yAxis: {//设置图表Y轴的相关属性
        title: 'Temperature(°C)',//Y轴名称
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {//数据点提示框,设置当鼠标滑向数据点时显示的提示框信息。
        formatter: function(){//回调函数,用于格式输出提示框的显示内容
            return '<b>'+ this.series.name +'</b><br/>'+ categories[this.x] +': '+ this.y +'°C';
        }
    },
    legend: {//设置图例的相关属性,应该是提示框的位置设置
        layout: 'vertical',//显示形式,支持水平horizontal和垂直vertical

        align: 'right',//对齐方式
        verticalAlign: 'top',//水平的对齐方式
        x: -10,
        y: 100,
        borderWidth: 0
    },
    series: [{//设置图表中要展示的数据
        name: 'Tokyo',//显示数据列的名称。
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {//data在图表中的数据列,可以为数组或者JSON格式的数据
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]


});

注意:两者就是xAxis处的处理不一样

效果链接:http://runjs.cn/code/bc4vtlre

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值