Highcharts通过allowPointSelect选取多个点
来源:互联网 发布:adobe illustrator mac 编辑:程序博客网 时间:2024/05/23 16:56
1、设置点可选中
设置plotOptions 的 allowPointSelect 为true,表示点可以选中。
2、获取选中的点
效果图如下:
设置plotOptions 的 allowPointSelect 为true,表示点可以选中。
2、获取选中的点
通过chart.getSelectedPoints();函数来获取选中的点,该函数返回值是一个数组,包含选中的点的所有信息。
实例代码如下:
<!doctype html><html lang="en"><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script> $(function () { $('#container').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, plotOptions: { series: { allowPointSelect: true } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); // the button action $('#111').click(function() { // Highcharts构造函数 var chart = $('#container').highcharts(), // 获取选中的点 selectedPoints = chart.getSelectedPoints(); // 选中个数 alert('You selected '+ selectedPoints.length +' points'); // 遍历选中的点 $.each(selectedPoints, function(i, point) { // category x轴值,index x轴下标值,y 轴值 alert("category=" + point.category + ", index=" + point.x+", y="+point.y); }) });});</script></head><body> <div id="container" style="min-width:700px;height:400px"></div> <div style="margin:10px 0px 10px 20px;"> <button id="111">获取选中的点</button> </div></body></html>
效果图如下:
demo实例下载
0 0
- Highcharts通过allowPointSelect选取多个点
- 通过class选取元素
- Java通过HighCharts导出图表
- Android 通过Gallery选取图片
- Highcharts通过AJAX访问后台数据库实时刷新
- highcharts(1)------- 通过 Ajax 加载数据
- js中通过 CSS 选择器选取元素
- android通过intent选取视频、图片、音频
- highcharts
- HighCharts
- highcharts
- Highcharts
- Highcharts
- HighCharts
- Highcharts
- highcharts
- Highcharts
- Highcharts
- MD5_algorithm
- 左右的移动<<>><>jQuery的实现
- linux与wince的最根本区别
- 加载省市:
- 全选或全不选
- Highcharts通过allowPointSelect选取多个点
- JSP的include指令
- 面试问题
- 密码强弱的判断
- Bitmap操作
- 用Windows API进行串口编程的一般步骤及相关函数讲解
- OSG学习笔记(一)之window下编译OSG静态库
- 界面上有几个球队名字的列表,将鼠标放到球队名字上就变为红色背景,其他球队背景颜色为白色,点击一个球队的时候就将点击的球队变为fontSize=30字体(fontSize=‘’回到默认)。
- Android程序——使用GridView组件实现如下图所示的效果