Highcharts中文教程之Highcharts扩展功能(插件制作)

原创|使用教程|编辑:龚雪|2014-05-16 10:25:46.000|阅读 12099 次

概述:通过使用highcharts api,很多使用者根据自己的需求制作了Highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已经比较多了,而扩展这一块的highcharts教程相对比较少。今天,我们就来深入研究highcharts扩展功能。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已经比较多了,而扩展这一块的highcharts教程相对比较少。今天,我们就来深入研究highcharts扩展功能,为大家奉上制作插件的highcharts 中文教程。

相关资源:

自从2.3版本以来,Highcharts就一直以模块化的方式在扩展:

  • 大部分的图表概念都对应着JavaScript原型或者“类”,它们展现在Highcharts的名字空间中,很容易被修改。例如Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart、Highcharts.Axis、Highcharts.Legend等等。
  • 构造函数逻辑是保存在方法 init 中的,允许覆盖初始化。
  • 事件可以通过远程与框架事件进行绑定。如果你的框架是jQuery,你可以尝试运行 $(chart).bind('load', someFunction); 。
  • 一些原型和属性列举在api.highcharts.com的Methods、Properties中,还有一些没有列出,这表示在优化和改编库时,它们在后续版本中有可能修改。我们不反对使用,但是提醒你的插件应该经过后续版本测试。鉴别这些函数可以通过以下三种方式:检查Highcharts名字空间、检查开发工具中生成的图表类型、学习highcharts.src.js的源代码。

Highcharts插件封装

和jQuery插件一样,Highcharts插件也需要用匿名的自动执行函数来封装,以防隐藏全局变量。 好的封住方法如下:

(function (H) {
   var localVar,         // local variable
      Series = H.Series; // shortcut to Highcharts prototype
   doSomething();
}(Highcharts));

Highcharts调用CHART.INIT

为了向图表的现有部分添加事件监听器,图表首次渲染后,可以创建一个通用回调函数并运行,将函数放到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图表效果图

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]
    }]

});

Highcharts​函数原型封装

有着动态特性的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图表效果图

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();
        }
    });
});


标签:JavaScript 图表插件highcharts

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highstock

纯JavaScript编写的开源股票图表控件

Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
在线
QQ
咨询
电话
177-4994-3557
购物车 反馈 返回
顶部
在线客服系统
live chat