`
xia562653223
  • 浏览: 6787 次
  • 性别: 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生成图片

    Highcharts的java后台生成各种图片,经过测试生成图片时间比较长,大概的3-7秒。直接运行demo,SimpleExport测试类,直接测试

    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 # ...

    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未...

    pywws-highcharts:Highcharts 渲染 pywws 数据

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

    Highcharts-4.0.4中文api和demo

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

    highcharts 导出图片 例子 .net C# Demo

    HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...

    Highcharts js生成图表

    Highcharts是很成熟的一个jquery插件,可以生成各种图表(柱形图/折线图/饼图),并附有例子。

    Highcharts-4.0.4含中文API

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

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

    用highcharts实现从mysql数据库获取数据生成实时折线图。开发平台是用eclipse实现的,是一个项目,用jsp显示从数据库读取的实时折线图。

    nuxt-highcharts:Nuxt的高位图

    半高图 Nuxt的高位图设置将nuxt-highcharts依赖项添加到您的项目中yarn add nuxt-highcharts # or npm install nuxt-highcharts 这些是模块的必需依赖项: 图表库。 这些是模块的可选依赖项: 。 请注意其。 此模块...

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

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

    Highcharts 导出图片

    Highcharts 导出图片,具体的图片导出的代码,带吗代码代码代码

    vue-highcharts:Vue的Highcharts组件

    Vue的Highcharts组件。 要求 Vue&gt; = 3.0.0 高图&gt; = 4.2.0 安装 npm i -S vue-highcharts 对于Vue 2 ,请运行npm i -S vue-highcharts@0.1 ,并签出文档。 用法 全球注册 import { createApp } from 'vue' ; ...

    react-highcharts:Highcharts库的React包装器

    您还可以查看并 安装 npm install react-highcharts --save 发牌 React-Highcharts存储库本身是MIT许可的,但是请注意,此模块取决于Highcharts.js。 对于商业用途,您需要有效的。 用法 Webpack /浏览器修饰 npm ...

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

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

    panel-highcharts:该存储库为Panel提供了HighCharts扩展

    panel-highcharts包使您可以轻松地使用Python中的在Jupyter Notebook中或作为 Web App进行探索性分析。执照panel-highcarts python软件包和存储库是开源的,可以免费使用(MIT许可证),但是Highcharts本身需要用于...

    highCharts 展示图片示例

    highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ,赐教一下!

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

    Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错,Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    python-highcharts:使用highchart.js在Python和IPython笔记本中进行绘图

    Python高图 在Python或什至在IPython笔记本中,使用出色的库作为maplotlib的交互式替代。 安装 pip install charts 快速开始 首先导入库: import charts 其次,从data模块中加载一些示例数据,并从options模块中...

Global site tag (gtag.js) - Google Analytics