Highcharts - 如何删除工具提示,串行数据之一

时间:2017-06-20 13:26:53

标签: javascript jquery highcharts

我使用线

绘制箭头

但我想删除第二点的工具提示。

确切地说,我想在一条箭头线上只显示一个工具提示

有什么办法吗?

代码:

$(function() {

  (function(H) {

    var arrowCheck = false,
        pathTag;

    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

      // 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));

      var arrowLength = 15,
        arrowWidth = 9,
        series = this,
        data = series.data,
        len = data.length,
        segments = data,
        lastSeg = segments[segments.length - 1],
        path = [],
        lastPoint = null,
        nextLastPoint = null;

      if (lastSeg.y == 0) {
        lastPoint = segments[segments.length - 2];
        nextLastPoint = segments[segments.length - 1];
      } else {
        lastPoint = segments[segments.length - 1];
        nextLastPoint = segments[segments.length - 2];
      }

      var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
        (lastPoint.plotY - nextLastPoint.plotY));

      if (angle < 0) angle = Math.PI + angle;

      path.push('M', lastPoint.plotX, lastPoint.plotY);

      if (lastPoint.plotX > nextLastPoint.plotX) {

        if (arrowCheck === true) {

          pathTag = document.getElementById("arrow");
          if (pathTag != null) {
            pathTag.remove(pathTag);
          }
        }

        path.push(
          'L',
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle)
        );
        path.push(
          lastPoint.plotX + arrowLength * Math.sin(angle),
          lastPoint.plotY + arrowLength * Math.cos(angle)
        );
        path.push(
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle),
          'Z'
        );
      } else {


        if (arrowCheck === true) {

          pathTag = document.getElementById("arrow");
          if (pathTag != null) {
            pathTag.remove(pathTag);
          }
        }

        path.push(
          'L',
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle)
        );
        path.push(
          lastPoint.plotX - arrowLength * Math.sin(angle),
          lastPoint.plotY - arrowLength * Math.cos(angle)
        );
        path.push(
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle),
          'Z'
        );
      }

      series.chart.renderer.path(path)
        .attr({
          fill: series.color,
          id: 'arrow'
        })
        .add(series.group);

       arrowCheck = true;

    });
  }(Highcharts));



  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      defaultSeriesType: 'scatter'
    },
    xAxis:{
        min: 0,
      max: 5
    },
    plotOptions: {

      series: {
        animation: {
          duration: 2000
        },
        lineWidth: 2,
        marker: {
          enabled: false
        }
      },

      states: {
        hover: {
          enabled: true,
          lineWidth: 2
        },

      }

    },

    series: [{
      name: 'main',
      id: 'main',
      data: [
        [0, 0],
        [3,4]
      ]
    }]
  });


});

1 个答案:

答案 0 :(得分:0)

然后按照以下内容更新您的剧集:

series: [{
  name: 'main',
  id: 'main',
  data: [
    {x: 0, y: 0],
    {x: 3, y: 4, tooltip: false}
  ]
}]

更新格式化程序配置:

tooltip: {
    formatter: function () {
        if (this.tooltip) {
            return false;
        }
        // ... other stuff
    }
} 

或者,代替以前的解决方案,可以使用指针事件:

series: [{
  name: 'main',
  id: 'main',
  data: [
    {x: 0, y: 0],
    {x: 3, y: 4, events: {mouseOver: function () {
        return false;
    }}}
  ]
}]