`
xia562653223
  • 浏览: 6965 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

highcharts:组合图,生成可以点击的横坐标

阅读更多
1.生成可以点击的横坐标主要的chart代码:
xAxis: {
	categories: [
    '一月',
	'二月',
	'三月',
	'四月',
	'五月',
	'六月',
	],
	labels:	{//生成可以点击的<a>横坐标
	    formatter: function() {
//this.value的值是:一月或其他的横坐标(当前点击的横坐标的值),showDetails为自己写的函数
		return '<a href="javascript:showDetails(\'' + this.value +'\');">' + this.value + '</a>';
	    }
        }		
}


如果想点击像柱状图的柱子这样的可以在plotOptions设置:

plotOptions: {
		series: {
			cursor: 'pointer',
			events: {
			    click: function() {//点击图上的值时会调用。this为series
			        alert(this.name);
			    }
		        }
		}
}


2.组合图的实现主要的chart代码:
    可以在plotOptions定义对各个图的不同样式,操作
plotOptions: {
		line: {
		       dataLabels: {
				enabled: true
			},
			enableMouseTracking: false					
		},
		column: {
			pointPadding: 0.2,
			borderWidth: 0,
			dataLabels: {
				enabled: false
			},
			enableMouseTracking: true//启用或禁用鼠标跟踪特定系列。这包括点工具提示并单击事件在图表和点。					
		},
		pie: {
		     allowPointSelect: true,
		     cursor: 'pointer',
		     dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
				}
			},
			nableMouseTracking: false		
		 }
}


然后再series写入自己的数据:
要注明type的类型: 'column','line','pie'等。



分享到:
评论

相关推荐

    java后端调用hightchars生成图片

    在Java后端调用Highcharts生成图片的过程中,我们主要涉及两个关键部分:Highcharts库和后端处理。Highcharts是一款强大的JavaScript图表库,用于在Web前端创建交互式的数据可视化图表。而当我们需要在服务器端生成...

    前端用Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    在前端开发中,数据可视化是不可或缺的一部分,Highcharts是一个强大的JavaScript图表库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及我们这里关注的Venn图(韦恩图)。Venn图是一种特殊的图表,常用于...

    angular-highcharts:Angular的Highcharts指令

    这是Angular的Highcharts指令。 要求 { " angular " : " &gt;=10.0.0 " , " highcharts " : " &gt;=7.0.0 " } 安装 纱 # install angular-highcharts and highcharts yarn add angular-highcharts highcharts npm # ...

    highcharts实现从mysql数据库获取数据生成折线图

    本篇将详细介绍如何利用Highcharts结合MySQL数据库,实现在Web应用中动态生成折线图。 首先,我们需要了解Highcharts的基本使用。Highcharts是一个轻量级的图表库,它提供了丰富的API和配置选项,可以自定义图表...

    highcharts本地导出图片案例

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种数据可视化图表,如折线图、柱状图、饼图等。在实际应用中,有时我们需要将这些图表导出为图片格式,以便于保存、打印或分享...

    零基础highcharts生成报表-简单应用 .

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如折线图、柱状图、饼图、散点图等,用于数据可视化。对于初学者来说,掌握Highcharts的基本用法和概念是十分重要的。在这个“零...

    highcharts

    2. **互动性**:Highcharts图表具有良好的交互性,用户可以通过点击、悬停等操作获取图表上的详细信息,也可以通过工具提示、缩放、平移等功能进行深入探索。 3. **响应式设计**:Highcharts图表自动适应不同屏幕...

    Highcharts js生成图表

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它允许开发者轻松创建高质量、交互式的图表,如柱状图、折线图、饼图等。这款库以其灵活性、易用性和丰富的功能而受到赞誉。在本文中,我们将深入探讨...

    vue3-highcharts:Highcharts.js的Vue 3组件包装器

    Vue 3-Highcharts JS 一个简单,快速的Vue 3组件,用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 Vue@3.0.0 Highcharts@8.0.0(较旧的版本可能有效,但未经测试) Vue和Highcharts未...

    3D图表Highcharts(3D)

    在3D散点图中,每个数据点都有自己的X、Y、Z坐标,通过设置`series.data`数组中的这些值,可以构建出多维度的数据展示。Highcharts会自动处理这些数据点的布局和渲染,使得在3D空间中的分布一目了然。 Highcharts的...

    Highcharts导出图片到本地指定路径

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如折线图、柱状图、饼图等。在实际应用中,我们有时需要将这些图表以图片的形式保存下来,以便于报告、分享或者离线查看。本文将...

    Highcharts+PHP+Mysql生成饼状统计图

    7. **优化和交互**:可以根据需求进一步优化图表,如添加工具提示、点击事件、动画效果等,以增强用户体验和可交互性。 通过以上步骤,我们可以利用Highcharts、PHP和MySQL创建一个动态的饼状统计图,实时反映...

    highCharts-时序图

    5. **实时更新数据**:可以通过定时器(如setInterval)定期获取新数据,并使用`series.addPoint()`方法将新数据点添加到图表中。 6. **优化性能**:对于大量数据或高频更新,可以使用Highcharts的`dataGrouping`...

    Highcharts .net(C#)导出图片支持中文svg转jpg等

    SVG是一种矢量图格式,可以无损缩放,但并非所有地方都支持直接显示SVG。通过`ExportSvgToImage`方法,我们可以将SVG转换为位图格式(如JPG、PNG): ```csharp // SVG转换为JPG var svg = "&lt;svg&gt;...&lt;/svg&gt;"; // ...

    highcharts快速生成百万数据点折线图.rar

    本文将深入探讨如何使用Highcharts高效地生成百万数据点的折线图。 首先,理解数据分块加载的概念是关键。对于大数据量,一次性加载所有数据会消耗大量内存并导致浏览器性能下降。因此,Highcharts支持分批加载数据...

    Highcharts-4.0.4中文api和demo

    2.图表类型众多:HighCharts现在支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。 3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户...

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的图表,包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中,雷达图常用于展示多维数据,每个轴代表一个特性或指标,数据点则...

    pywws-highcharts:Highcharts 渲染 pywws 数据

    这是我在用来生成天气图的代码。 点击查看截图,或为我的活生生的例子。 气象站插入 Linux 机器,该机器运行以将数据从 USB 线上拉出并通过一系列模板运行。 我只是定义了几个输出 JSON 的模板。 这些文件然后由...

    Highcharts 构建曲线图

    此外,Highcharts还提供了导出图表的功能,通过`exporting`模块,用户可以将图表保存为图片。 总的来说,通过Highcharts,我们可以轻松地在Web应用中创建美观且交互性强的数据可视化曲线图。这个例子提供了一个基础...

Global site tag (gtag.js) - Google Analytics