How To:Wijmo Chart 获取当前点击位置数据

有些用户反映,需要获取最终用户点击 Wijmo Chart 的坐标信息。通过 Wijmo 当前的接口无法实现该功能。这篇文章将阐述如何实现该功能。

发布于 2013/01/18 00:00

ComponentOne Enterprise

有些用户反映,需要获取最终用户点击 Wijmo Chart 的坐标信息。通过 Wijmo 当前的接口无法实现该功能。这篇文章将阐述如何实现该功能。

首先,我们需要创建 Column Bar 图表,关于创建方法可以参考:demo

WijBarChart 没有提供 Click 事件。所以,我们需要给 Base Div 添加 Click 事件,通过以下代码获取 Chart 的范围: 

$("#wijbarchart").click(function (e) {
   //get the bounds of chart
   var offset = $(this).offset(),
   left = e.pageX - offset.left,
   top = e.pageY - offset.top,
   lineChart = $(this).data("wijbarchart"),
   bounds = lineChart.canvasBounds,
   xMin = lineChart.axisInfo.x.min,
   xMax = lineChart.axisInfo.x.max,
   yMin = lineChart.axisInfo.y[0].min,
   yMax = lineChart.axisInfo.y[0].max,
   xVal, yVal;

   if (left <= bounds.startX || left >= bounds.endX || top <= bounds.startY || top >= bounds.endY) {
      return;
   }
   //calculate the x and y
   xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX) * (xMax - xMin);
   yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY) * (yMax - yMin);
   $("#xyCoord").text("x : " + Math.round(xVal, 10) + ", y : " + Math.round(yVal, 10));
   $('#dataCoord').text('');
});

同样,我们也可以给 Base Div 添加 Double Click 事件来获取当前点击左边信息:

$("#wijbarchart").dblclick(function (e) {
   //get the linechart object
   var target = $(e.target);
   if (target.data('owner')) {
      target = target.data('owner');
   }
   var data = target.data('wijchartDataObj');
   if (data) {
      $('#dataCoord').text('DataPoint X : ' + data.x + ', DataPoint Y :' + data.y);
   }
});

演示地址:sample

演示截图:

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台,并完美集成于 Visual Studio 的第三方控件集,包含 300 多种 .NET开发控件,提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能,被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务,并由技术支持工程师为您1对1解答。>> 发帖提问

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态