提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|使用教程|编辑:龚雪|2014-05-16 10:25:46.000|阅读 12876 次
概述:通过使用highcharts api,很多使用者根据自己的需求制作了Highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已经比较多了,而扩展这一块的highcharts教程相对比较少。今天,我们就来深入研究highcharts扩展功能。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已经比较多了,而扩展这一块的highcharts教程相对比较少。今天,我们就来深入研究highcharts扩展功能,为大家奉上制作插件的highcharts 中文教程。
自从2.3版本以来,Highcharts就一直以模块化的方式在扩展:
和jQuery插件一样,Highcharts插件也需要用匿名的自动执行函数来封装,以防隐藏全局变量。 好的封住方法如下:
(function (H) { var localVar, // local variable Series = H.Series; // shortcut to Highcharts prototype doSomething(); }(Highcharts));
为了向图表的现有部分添加事件监听器,图表首次渲染后,可以创建一个通用回调函数并运行,将函数放到Chart.prototype.callbacks数组中能完成上述操作。
H.Chart.prototype.callbacks.push(function (chart) { H.addEvent(chart.container, 'click', function (e) { e = chart.pointer.normalize(); console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY ); }); H.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) { console.log('Set extremes to ' + e.min + ', ' + e.max); }); });
效果图
highcharts demo代码:
(function (H) { Highcharts.Chart.prototype.callbacks.push(function (chart) { H.addEvent(chart.container, 'click', function (e) { e = chart.pointer.normalize(); console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY); }); H.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) { console.log('Set extremes to ' + e.min + ', ' + e.max); }); }); }(Highcharts)); var chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'x' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, 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] }] });
有着动态特性的JavaScript在动态改变脚本行为时非常强大。在Highcharts中可以创建一个名为warp的实例。它可以封装现有的函数原型(“method”),允许你在这之前或之后向其中添加自己的代码。
wrap函数的第一个参数为父类对象,第二个参数为要封装的函数的名字,第三个参数为回调替换函数。原始函数作为第一个参数传递给替换函数,原始的参数也遵循这个规则。
代码示例:
H.wrap(H.Series.prototype, 'drawGraph', function (proceed) { // Before the original function console.log("We are about to draw the graph: ", this.graph); // Now apply the original function with the original arguments, // which are sliced off this function's arguments proceed.apply(this, Array.prototype.slice.call(arguments, 1)); // Add some code after the original function console.log("We just finished drawing the graph: ", this.graph); });
效果图
效果图
highcharts demo代码:
(function (H) { H.wrap(H.Series.prototype, 'drawGraph', function (proceed) { // Before the original function console.log("We are about to draw the graph:", this.graph); // Now apply the original function with the original arguments, // which are sliced off this function's arguments proceed.apply(this, Array.prototype.slice.call(arguments, 1)); // Add some code after the original function console.log("We just finished drawing the graph:", this.graph); }); }(Highcharts)); var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, 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] }] });
学习之后,我们来实践一下。我们来看一个案例,在这个例子中,客户想要在Highstock的列类型系列使用标记(“trackballs”),而当前只有线类型系列支持标记。为了实现这个功能,需要编写一个小插件。
这个插件在每个不支持和不包含标记的图表中添加一个trackball。
为了完成这个任务,从以下代码入手:创建一个包含此插件的自动执行函数。
(function (H) { // This is a self executing function // The global variable Highcharts is passed along with a reference H }(Highcharts));
之后,需要为方法Tooltip.prototype.refresh和Tooltip.prototype.hide添加其他的功能。因而,封装这个方法。
(function (H) { H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) { // When refresh is called, code inside this wrap is executed }); }(Highcharts));
当调用刷新时,我们希望在每个系列的当前点绘制一个trackball。如果一个系列已经包含了一个标记,这个函数应该被丢弃。
H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) { // Run the original proceed method proceed.apply(this, Array.prototype.slice.call(arguments, 1)); // For each point add or update trackball H.each(points, function (point) { // Function variables var series = point.series, chart = series.chart, pointX = point.plotX + series.xAxis.pos, pointY = H.pick(point.plotClose, point.plotY) + series.yAxis.pos; // If trackball functionality does not already exist if (!series.options.marker) { // If trackball is not defined if (!series.trackball) { // Creates a new trackball with same color as the series series.trackball = chart.renderer.circle(pointX, pointY, 5).attr({ fill: series.color, stroke: 'white', 'stroke-width': 1, zIndex: 5 }).add(); } else { // Updates the position of the trackball series.trackball.attr({ x: pointX, y: pointY }); } } }); });
现在trackball已经显示了,但是当工具提示移除后需要隐藏它,因而在隐藏方法里需要一些其他的功能,一个新的封装被添加到了包含这个插件的函数中。
H.wrap(H.Tooltip.prototype, 'hide', function (proceed) { var series = this.chart.series; // Run original proceed method proceed.apply(this); // For each series destroy trackball H.each(series, function (serie) { var trackball = serie.trackball; if (trackball) { serie.trackball = trackball.destroy(); } }); });
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都控件网本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢