Highcharts图表结构分析:详解坐标轴及其类型
名称: Highcharts
大小: 13MB 版本: 3.0.7 类别: 开发工具 语言: 英文
应用平台: windows /
Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true可以让x,y轴显示位置对调。下图为图表中坐标轴组成部分。 一、坐标轴组成部分 轴标题-Axis Title 坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Value',设置坐标轴标题的代码如下: xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } } 更多关于Axis Title属性请查看API文档相关内容xAxis.title、yAxis.title。 轴标签-Axis Labels 坐标轴标签(分类)。Labels常用属性有enabled、formatter、setp、staggerLines。 1、开启 是否启用Labels。x,y轴默认值都是true,如果想禁用(或不显示)Labels,设置该属性为false即可。 2、格式化程序 标签格式化函数。默认实现是: formatter:function(){returnthis.value; } this.value代码坐标轴上当前点的值(也就是x轴当前点的x值,y轴上当前点的y值),除了value变量外,还有axis、chart、isFirst、isLast可用。例如调用this.isFirst的结果如下图所示: 自定义标签格式1 另外一个例子,实现更高级的自定义格式化函数,截图如下: 自定义标签格式2 实现代码如下: yAxis: { labels: { formatter:function(){ if(this.value =100) { return"第一等级("+this.value+")"; }elseif(this.value 100 this.value =200) { return"第二等级("+this.value+")"; }else{ return"第三等级("+this.value+")"; } } } Labels显示间隔,数据类型为number(或int)。下图说明了step的用法和作用: Y Lables width step 4、staggerLines 水平轴Lables显示行数。(该属性只对水平轴有效)当Lables内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。 更多关于Lables的属性请查看API文档xAxis.labels、yAxis.labels。 轴刻度-Axis Tick Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px,宽为1px;y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。 1、tickLength、tickWidth、tickColor 分别代表刻度线的长度、宽度、颜色。 2、tickInterval 刻度间隔。其作用和Lables.step类似,就是不显示过多的x轴标签内容,不同的是,tickInterval是真正意义上的调整刻度,而Lables.step只是调整Labels显示间隔。所以在实际应用中,tickInterval用的多。 针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据,其默认值是tickPixelInterval值,对于Categorty表示间隔一个category。 3、tickmarkPlacement 刻度线对其方式,有between和on可选,默认是between。设置为on后的变化如下图: xAxis tickmarkPlacement on 更多关于Tick的属性请查看API文档。 网格线-Grid Line 坐标轴网格线。默认情况下,x轴网线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置,分别是:gridLineWidth、gridLineColor、gridLineDashStyle。 1、gridLineWidth 网格线宽度。x轴默认为0,y轴默认为1px。 2、gridLineColor 网格线颜色。默认为:#C0C0C0。 3、gridLineDashStyle 网格线线条样式。和Css border-style类似,常用的有:Solid、Dot、Dash。 下图为自定义x和y轴的gridLines效果图: 自定义网格线 多元轴-Multiple Axis 多个轴。在Highcharts中, 坐标可以是多个,最常见的是多个y轴。多轴存在时,Axis是一个数组,而在赋值时,通过Axis数组的下标与数据关联。如下图所示: 多元轴-Multiple Axis 总结如下: Series中设置每个轴值时,用轴数组下标关联。 设置opposite: true表示该轴位置反转,即为y轴时显示在右侧,为x轴时显示在顶部(和正常情况下x轴在下,y轴左构成反转)。 在Series中可以设置该轴的类型,多个轴不同的类型(例如:type:'spline'),就构成了多种图表并存的混合图。 二、坐标轴类型 坐标轴中,可以通过Type指定坐标轴类型,有linear、logarithmic、datetime、category可选,默认是:linear。指定类型的实例代码如下: // The types are 'linear', 'logarithmic' and 'datetime' yAxis: { type: 'linear', } // Categories are set by using an array xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] } linear 线性轴。默认类型,x轴按照Axis.tickInterval值增长,y轴默认是自适应。 logarithmic 对数轴。按照数学中的对数增长,例如1,2,4,8... 用的不多,主要用于对数图表,实例请查看在线演示平台的对数直线图。 datetime 时间轴。时间使用和Javascript 日期对象一样,即用一个距1970年1月1日0时0分0秒的毫秒数表示时间,也就是时间戳。更多Javascript 日期对象请阅读W3C school相关内容。 Highcharts有很多时间格式化函数,列举如下: 1、Date.getTime() 获取当前时间戳。实例用法如下: time = Date.getTime();//time = 1384442746960 (ms) 当前时间为 2013-11-14 23:25:46 2、Date.UTC(year,month,day,hours,minutes,seconds,millisec) 通过UTC方式获取指定时间的毫秒数,例如获取 2013-11-14 00:00:00的毫秒数代码如下: time = Date.UTC(2013,11,14,0,0,0,0);// time = 1386979200000 (ms); 3、Highcharts.dateFormat(String format) Highcharts时间格式化函数,同PHP格式化函数。具体用法参考API文档Highcharts.dateFormat(),当然,在本教程的《函数使用》章节中具体讲解。 category 数组轴。用的最多也最简单,这里就不多说。
【数据可视化】Highcharts 时区问题总结
Highcharts 默认的时间是标准时间(即 UTC 时间),new Date创建的时间是包含当前时区的,所以直接用会导致偏差,解决办法是 1 和 2,分别表示做时区调整和使用当前时区。方法 3 中Date.UTC则是创建标准时间。
类似echarts还有哪些图表
1、fusionCharts FusionCharts是一个跨平台,能够跨浏览器的flash图表组件,能够被ASP NET、JSP、ColdFusion、ASP、PHP、Ruby on Rails、简单HTML页面甚至PPT调用。FusionCharts利用Flash创建了紧凑、互动性和视觉逮捕图表,还可以用来制作数据动画图表。2、Highcharts Highcharts是一个用纯JavaScript编写成的一个...
HighCharts柱状图小数值不显示
解决方案:给柱子设置一个最小高 后遗症:即使数据为0,也会2px的高度 后遗症解决方案:数值为0的,柱子颜色设置为白色
highcharts、highstock、highmaps三款软件有什么区别,如何收费,是否需要...
highcharts是普通图表。highstock是专用于股票的图表。highmaps是地理信息地图。这三款软件都很经典,而且普通功能不需付费,可免费使用。但是如果有商业行为或者更多个性化需求,是要授权和收费的。其实它所提供的一般功能已经足够满足大部分需求。同时这个系列软件业确实是高大上,易上手,官方网站上有全部A...
highcharts做柱状图,怎样设置柱子宽度
可以通过设置plotOptions内对应series的pointWidth也就是数据点的宽度值加以控制,完整代码如下所示:view sourceprint?01.$(function () { 02.$('#container').highcharts({ 03.chart: { 04.type: 'bar'05.},06.xAxis: { 07.categories: ['Jan', 'Feb', 'Mar']08.},09.10.plotOptions:...
highcharts怎么在本地导出图片,我在官网上看到有两种方法,一种是php和...
回答:官网highchart自带一个js脚本,在生成的图表右上角有个按钮就可以导出jpg,png或者pdf,很方便的
关于django怎么使用highcharts的信息
1、如何在django中使用Echarts的js文件2、highcharts函数怎样调用3、angularjshighcharts怎么用如何在django中使用Echarts的js文件1.选择正确的echarts.js,开发版选择echarts.baidu.com上的源码版,避免出现问题 2.在项目主目录中新建static文件夹,里面建立js、css、images文件夹 3.在settings文件中新增...
如何设置 highcharts X轴和Y轴值
highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。1、Axis Title 坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Value',设置坐标轴标题...
如何让highcharts图表显示横向yAxis和纵向xAxis网格线
$(function () {$('#container').highcharts({chart: {},xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],gridLineColor: '#197F07',\/\/纵向网格线颜色gridLineWidth: 1 \/\/纵向网格线宽度},yAxis: {grid...
如何设置highcharts图表坐标刻度字体样式
yAxis:{ title:{ text:''},min:0,gridLineWidth:'0px',plotLines:[{ value:0,width:1,color:'#fff'}],labels:{ formatter:function(){ returnthis.value },style:{ color:'#fff',fontSize:'16px',fontFamily:'微软雅黑'} },lineWidth:1 },...
贾图元治: 选中需要作图的区域,然后选择插入图表>组合图.项目一和项目二均选择折线图.其中一个选择次坐标轴.你想要的是这个效果吗?不是的话,你直接把表格放上来,我看一下,才能更清楚你的需求.
隆回县13139228124: 怎么用Highcharts制作出仪表盘的图 - ?
贾图元治: 1. 代码如下:$(function () { $('#container').highcharts({ chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }, title: { text: 'Speedometer' }, pane: { startAngle: -150, endAngle: 150, ...
隆回县13139228124: 如何对highcharts 柱状图进行制作与选择 - ?
贾图元治: 步骤一:老规矩,插入highcharts.js和jquery.min.js<br><br>步骤二:先做柱状图<br>先设置一个container的ID,高和宽自己定,这里,我定稿为400px<br><br>然后是图表的js:<br><br>说明一:在输入月份等类型时候,也可以写成英文,写成中...
隆回县13139228124: 怎么用highcharts动态绘制一个图表 - ?
贾图元治: 你可以定义一个实体类: public DataView{ private String type; private String name; private String[][] data; //省略getter,setter方法 } 诸如此类的JSON数据都是这样搞的.
隆回县13139228124: 如何在Highcharts中调用CSV文件实现图表功能 - ?
贾图元治: 第一步,新建静态页面line.html,引入HighCharts核心js文件,如下图所示:第二步,插入折线图容器,设置折线图宽度和高度,如下图所示:第三步,编写生成HighCharts折线图的js代码,如下图所示:第四步,预览该静态页面,查看折线图效果,如下图所示:第五步,添加如下代码 line:{ dataLabels:{ enabled:true } } 如下图所示:6 第六步,再次预览该界面,可以看到图形上点数据显示出来了,如下图所示:
隆回县13139228124: 类似echarts 的报表工具有哪些 - ?
贾图元治: 1、fusionCharts:FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是lash图形方案提供商.FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, ...
隆回县13139228124: highcharts柱状图事件 - ?
贾图元治: 在plotOptions.column.events.click中,比如:<br>plotOptions:{<br> column:{<br> events :{<br> click: function(event) {<br> alert(this.name);<br> }<br> }<br> }<br>}<br>其中,this表示当前的条形柱,可以通过this.name 获取柱子的名字,this.x 获取柱子的x轴值,this.y获取该柱子的y轴值
隆回县13139228124: highcharts饼图怎样布局 - ?
贾图元治: 很简单,我给你代码<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/...
隆回县13139228124: 如何设置 highcharts X轴和Y轴值 - ?
贾图元治: highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调. 1、Axis Title 坐标轴标题.默认情况下,x轴...
隆回县13139228124: highcharts做柱状图,怎样设置柱子宽度 - ?
贾图元治: 示例:column Chart plotOptions: { column : { borderWidth: 0, pointWidth:25, //柱子宽度 dataLabels: { style:{ fontSize:11 }, enabled: false } } },