将选择范围放大为误差线系列

Amplify range of selection into error bar series

本文关键字：误差 系列 放大 选择 范围      更新时间：2023-09-26

我正在使用一种自定义方式在Highchart中显示工具提示，当我选择一系列类型时，一切都运行良好：样条曲线..但是当我尝试对一系列type: "error bar"做同样的事情时，很难选择线条。有没有办法增加这种系列的选择范围？

这段代码表示代码如何显示工具提示。我想我应该添加一些代码来悬停事件？

events : {
    click : function(evt) {
        this.chart.myTooltip.refresh(evt.point, evt);
    },
    mouseOut : function() {
        this.chart.myTooltip.hide();
    }                       
}

完整代码

x = null;
$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
    },
    tooltip: {
      valueSuffix: '°C',
      enabled: false
    },
    chart: {
      events: {
        load: function() {
          this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
        }
      }
    },
    plotOptions: {
      series: {
        stickyTracking: false,
        events: {
          click: function(evt) {
            this.chart.myTooltip.refresh(evt.point, evt);
          },
          mouseOut: function() {
            this.chart.myTooltip.hide();
          }
        }
      }
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'Temperature error',
      type: 'errorbar',
      data: [
        [6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0],
        [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0]
      ]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

您可以对问题进行一些小的解决方法。您可以添加具有更大线宽和透明颜色的新错误栏系列。

{
      name: 'Temperature error',
      type: 'errorbar',
      color: 'rgba(0,0,0,0)',
      lineWidth: 20,
      data: [
        [6, 8],
        [5.9, 7.6],
        [9.4, 10.4],
        [14.1, 15.9],
        [18.0, 20.1],
        [21.0, 24.0],
        [23.2, 25.3],
        [26.1, 27.8],
        [23.2, 23.9],
        [18.0, 21.1],
        [12.9, 14.0]
      ]
    }

它应该让您有机会在不直接单击错误栏时显示错误栏的工具提示。

在这里，您可以找到它如何工作的示例：http://jsfiddle.net/4qLgu8so/1/

亲切问候

相关文章：