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
- hichart中,让折线图从原点开始
- 折线图x轴从原点开始
- HiChart图表统计:jsp中hichart用法以及从后台获取数据
- 让fastreport报表中每页序号从1开始。
- python matplotlib从文件中读取数据绘制折线图
- 折线图hellocharts-android库修改坐标、空心原点的实现
- 让管理从尊重开始
- 从棋盘原点开始扔骰子,到达某一个终点的概率
- python 画图--简单开始及折线图
- python 画图--简单开始及折线图
- python 画图--简单开始及折线图
- python 画图--简单开始及折线图
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法
- 从现在开始让自己变得更好
- mysql 让id重新从1开始
- Delphi中如何让TEdit编辑框控件从右边开始输入数据呢?
- Android中自定义折线图
- Flex 折线图中对折线手动设置显示问题
- 深入浅出单实例Singleton设计模式
- iOS- NSThread/NSOperation/GCD 三种多线程技术的对比及实现
- PHP 7 值得期待的新特性(下)
- Android模拟聊天工具
- PHP数组中的指针小思考
- hichart中,让折线图从原点开始
- html、css、js、jsp注释
- 有关UILabel那些你可能不知道的事儿
- DiskLruCache
- ArcGIS API for javascript开发笔记(五)——GP服务调用之GP模型的发布及使用详解
- BLE协议栈之读取CC2541的MAC地址
- 第11周 项目1-验证算法(1)层次遍历算法的验证
- Jump Game II 算法编程
- 连接查询