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

来源:互联网 发布:网络存储的安全问题 编辑:程序博客网 时间:2024/05/09 14:28

横坐标为数字:

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

0 0
原创粉丝点击