Ember highcharts分享了工具提示

时间:2016-08-23 08:29:07

标签: javascript ember.js highcharts

我正在使用highcharts plugin,我在页面上有大约5个图表。每个图表都是一个单独的组件。我是个新手,所以我不知道如何为所有图表制作共享工具提示。我看到了带有jQuery的示例,容器上的事件和带有同步工具提示的所有函数。我试图在组件中插入这些函数,但它并没有真正起作用。怎么在ember中完成?

这是一个混音:

 export default Ember.Mixin.create({
 syncExtremes: function (e) {
    let thisChart = this.chart;
    if (e.trigger !== 'syncExtremes') {
      Highcharts.each(Highcharts.charts, function (chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
          }
        }
      });
    }
  },
  sharedRooltips: function () {
    Ember.$('#container').bind('mousemove touchmove touchstart', function (e) {

      let chart, point, i, event;

      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
          point.highlight(e);
        }
      }
    });

    Highcharts.Pointer.prototype.reset = function () {
      return undefined;
    };

    Highcharts.Point.prototype.highlight = function (event) {
      this.onMouseOver(); // Show the hover marker
      this.series.chart.tooltip.refresh(this); // Show the tooltip
      this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
    };
  },

在组件中:

    ....
    this.sharedRooltips();
        _syncExtremes= this.syncExtremes;
     ....
     xAxis: {
            type: 'datetime',
            crosshair: true,
            events: {
              syncExtremes: _syncExtremes
            }
          },
    ....

0 个答案:

没有答案