Highcharts学习之坐标轴

2024-09-26 21:04:57

前言

所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。

下面一起来学习学习Highcharts的坐标轴。

tags:

1.标题

xAxis:{
  title:{
    text:'x轴标题'
  }
}
yAxis:{
  title:{
    text:'y轴标题'
  }
}

2.标签

labels:enabled、formatter、setp

yAxis:{
        labels:{
         enabled:true,
         formatter:function(){
           if(this.value <=3) {
             return "第一等级("+this.value+")";
           }else if(this.value >3 && this.value <=5) {
             return "第二等级("+this.value+")";
           }else {
             return "第三等级("+this.value+")";
           }
         },
         step:1  //间隔几个线显示一次
        }

3.网格

1.gridLineWidth

网格线宽度。x轴默认为0，y轴默认为1px。

2.gridLineColor

网格线颜色。默认为：#C0C0C0。

3.gridLineDashStyle

网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash。

yAxis:{
 //gridLineWidth:'1px',  //注意如果使用了这个属性gridLineDashStyle会不起作用
 gridLineColor:'#019000',
 gridLineDashStyle:'Dash',
}

4.类型

xAxis:{
   categories:['A','B','C']
  },
yAxis:{
   type:'datetime'
  },

5.reversed

倒置是将轴翻转而不是x、y对调。例如y轴倒置的结果是y轴是从最大的值开始的，最小值反而在最下方

xAxis:{
        categories:['A','B','C'],
        reversed:true
      },
      yAxis:{
        type:'datetime',
        reversed:true
      },

6.opposite

当其值设置为true时，x轴和y轴显示的位置分别上下，左右对调。

xAxis:{
        categories:['A','B','C'],
        opposite:true
      },
      yAxis:{
        type:'datetime',
        opposite:true
      }

7.inverted

chart:{
        type:'line',
        style:{
          fontSize:"17px",
        },
        inverted:true
      }

8.min、max

控制数轴的最小值和最大值。

注意：控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等（这也是很常见的问题）

总结

以上就是本文的全部内容了，大家学会了吗？小编还会继续更新Highcharts的文章，对Highcharts感兴趣的朋友们要继续关注我们，希望本文给大家学习带来的帮助。

Highcharts使用简例及异步动态读取数据

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch
Highcharts入门之简介

在网页中创建一个这样的图表,你觉得会要多久? 确实需要很久很久,如果你对JavaScript不是特别熟练的话. 但是有个好消息就是如果,你使用Highcharts框架的话,可能十多行代码就能让你在页面中生成这样有特效的图表. 当然他的功能远不止这些,各种图表,打印,导出,对比分析. 他不仅仅可以用来做网站的图表分析,就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧,完全就可以抛弃PPT了啊. 所以赶紧来了解如何使用他吧!!! 下面给一个简单的Dome: 1.在highchart
Highcharts学习之数据列

什么是数据列数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组如果有categories属性的话就是使用一维数组 data : [1, 4, 6,
PHP+mysql+Highcharts生成饼状图

Mysql 首先我们建一张·chart_pie·表作为统计数据. -- -- 表的结构 `chart_pie` -- CREATE TABLE IF NOT EXISTS `chart_pie` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(30) NOT NULL, `pv` int(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUT
Highcharts入门之基本属性

一.基本组成: 1.Highcharts包含标题(Title):主标题是必须的但是subTTitle不是必须 2.坐标轴(Axis):有x坐标(xAxis)和y坐标(yAxis) 3.数据列(Series):每个曲线,每个柱形条组,每个饼图的部分 4.数据提示框(Tooltip):鼠标放上去的提示框 5.图例(Legend):通过点击标示可以显示或隐藏该数据列 6. 7.版权信息(Credits):一般是highcharts的官网,指定credits.enabled=fa
Highcharts 多个Y轴动态刷新数据的实现代码

效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol
动态更新highcharts数据的实现方法

动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt
浅析jquery的js图表组件highcharts

Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for
Highcharts学习之坐标轴

前言所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调. 下面一起来学习学习Highcharts的坐标轴. tags: 1.标题 xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } } 2.标签 labels:enabled.formatter.setp yAxis:{ labe
Python matplotlib学习笔记之坐标轴范围

Python学习笔记--坐标轴范围参靠视频:<Python数据可视化分析 matplotlib教程>链接:https://www.bilibili.com/video/av6989413/?p=6 所用的库及环境: IDE:Pycharm Python环境:python3.7 Matplotlib: Matplotlib 1.11 Numpy: Numpy1.15. 坐标轴范围概念根据需求调整坐标轴的范围坐标轴范围调整第一种形式通过plt.axis()可以查看图形的x轴的最小最大坐
学习python中matplotlib绘图设置坐标轴刻度、文本

总结matplotlib绘图如何设置坐标轴刻度大小和刻度. 上代码: from pylab import * from matplotlib.ticker import MultipleLocator, FormatStrFormatter xmajorLocator = MultipleLocator(20) #将x主刻度标签设置为20的倍数 xmajorFormatter = FormatStrFormatter('%1.1f') #设置x轴标签文本的格式 xminorLocator = M
在vue项目中引入highcharts图表的方法

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="chart" id="myChart" > <div class="emcs_charts" :id="id" ></div&
JavaScript图表插件highcharts详解

目录一.Highcharts svg特点: 二.1 分钟上手 Highcharts 1.调用远程数据 2.使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表 3.活动图(Live Charts) 三.Highcharts 基本组成四.配置选项 1.参数配置(属性+事件) 2.Chart:图表区选项 3.Color:颜色选项 4.Title:标题选项,Subtitle:副标题选项 5.xAxis:X轴选项,yAxis:Y轴选项 6.Series:数据列选项 7.plot
highcharts 在angular中的使用示例代码

本文介绍了highcharts 在angular中的使用示例代码,分享给大家.具体如下: 网址 https://www.hcharts.cn/demo/highcharts https://github.com/pablojim/highcharts-ng 安装依赖 npm install highcharts-ng --save 引入依赖 'highcharts/highcharts.src.js', 'highcharts-ng/dist/highcharts-ng.min.js' 注入依赖
HighCharts图表控件在ASP.NET WebForm中的使用总结（全）

从事过ASP.NET开发的可能都会接触到一些图表控件,比如OWC.ZendGraph等等,这些控件都有一个特点,那就是我们可以像操作.NET中的对象一样控制它们的某些属性,有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行.本篇周公讲述一个JavaScript的图表控件,不要小看了这个JavaScript图表控件,它能生成各种常见的图表. Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互
Highcharts＋NodeJS搭建数据可视化平台示例

前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne

Highcharts学习之坐标轴

相关推荐

随机推荐