在Highcharts图表上滚动

Question

我的问题是： 我正在使用PhoneGap框架开发混合应用程序，我需要这个应用程序具有图表功能，因此我决定使用highcharts库。

问题是，在触摸图表后（至少在触摸图像的选定部分内），似乎无法滚动。

我想要做的是防止图表接收任何事件，并显示一个纯粹的图表，不会高亮任何内容，即使在图表上滚动也可以。

代码：

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'containerBar',
    animation: false,
    type: 'bar',
    events: {
      click: function(event){
        return false;
      }
    }
  },
  scrollbar: {
    enabled: true
  },
  title: {
    text: 'Fruit Consumption'
  },
  plotOptions: {
    bar: {
      events: {
        click: function(event){
          return false;
        },
        mouseOver: function(event){
          return false;           
        },
        legendItemClick: function () {
          return false;
        }
      },
      states: {
        hover: function(){
          alert("Allow");
        }
      }
    }
  },
  events: {
    click: function(e) {
      alert("Click");
    }  
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Jane',
    data: [1, 3, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

- Aatish Molasi

---

使用Highstock。http://www.highcharts.com/stock/demo/spline - Hardik Mishra

如果你只是想展示简单的图表，那么为什么要使用像Highcharts这样的重型库呢？我更喜欢像Google Chart Tools这样的东西。 - keune

@HardikMishra Highstock 似乎有相同的问题.. - Aatish Molasi

@keune 这只是一种POC，实际应用中会有更多的图表。 - Aatish Molasi

你是否曾经找到了解决这个问题的方法？ - Cristian Vrabie

大家好，我之前也遇到了同样的问题，但现在有一个解决方法。如果你使用最新版本（5.0.9），你可以在图表上滚动。他们在Highcharts 5.0中修复了这个问题。目前v5.0.9已经修复了这个问题，你可以使用它。https://code.highcharts.com/highcharts.js链接指向v5.0.9，但是当我下载并使用zip包时，它给了我一些错误，如链接https://forum.highcharts.com/highcharts-usage/chart-is-solid-black-after-upgrade-to-5-0-t36551/所指出的。正确的方法是从https://code.highcharts.com/highcharts.js复制代码。希望能帮到你们。 - katmanco

Answer 1

尝试这个链接.... 只需制作一个单独的javascript文件，复制粘贴代码并包含该文件即可。

- Aatish Molasi

---

它可以工作，但是会出现js错误，说mouseTracker.normalizeMouseEvent未定义。幸运的是，我只在移动设备上使用它，所以注释掉了那个“normalize”东西。（或者可以用try/catch包装一下）。 - Gordon Glas

太好了！为什么不为Highcharts创建一个问题，以便他们可以将其合并到他们的存储库中呢？ - micho

完美解决了问题，让我的星期五变得更加美好！ - DotNetDublin

@Aatish，我认为这不应该是被接受的答案。我认为尝试在没有彻底阅读库文档的情况下添加外部扩展是不好的做法。就像他们文档中所述，简单地设置tooltip.followTouchMove: false就可以解决问题，我认为这对你也是适用的，前提是我正确理解了你的问题。我不需要添加外部JS文件或修改他们的库代码。始终要阅读文档 :) - BenS

@BenS： 我没有时间测试这个，但我会相信文档并进行更新。 - Aatish Molasi

Answer 2

为了跟进这个问题及其答案，Highcharts可视化的滚动问题已在版本3.0.1（2013-04-09）中得到解决。Highcharts的兄弟Highstock也在版本1.3.1（2013-04-09）中得到类似的更新。

添加了新选项tooltip.followTouchMove。当此选项为true时，可以通过在图表上拖动单个手指来移动工具提示，就像在Highcharts 2中一样。当它为false时，单指拖动将被图表忽略，并导致整个页面滚动。这仅适用于未启用缩放时。

在Highcharts版本4.1.0（2015-02-16）中进行了进一步的增强：

默认情况下将tooltip.followTouchMove设置为true，并允许同时滚动页面。

有关完整的Highcharts更改日志，请参见http://www.highcharts.com/documentation/changelog。

- Mike Zavarello

---

这个解决方案对我很有效。我必须确保将 followTouchMove: false 属性嵌套在顶级 tooltip 图表选项下。这样它就会应用于每个系列及其相应的图形。这应该是被接受的答案。 - BenS

Answer 3

问题是由于Highcharts捕获所有触摸事件并使它们无效。我解决了这个问题，基本上只是在移动设备上叠加一个div，防止这些事件到达Highcharts元素（因此它们可以触发默认行为，即页面滚动）。我使用了以下JS代码（假设您也正在使用JQuery或等效工具）：

$('.highcharts-container').each(function() {
  var dragHandle;
  dragHandle = $('<div class="chart-drag-handle">');
  $(this).append(dragHandle);
  dragHandle.on('touchstart', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchmove', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchend', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchcancel', function(e) {
    e.stopPropagation();
  });
});

需要添加的元素需要被设计成覆盖在图表上，我是这样做的：

.highcharts-container .chart-drag-handle {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 100;
}

- Jared Hales

---

没有必要定义相同的函数4次 - 你可以这样做 var stopProp = function (e) { e.stopPropagation(); }; 然后使用 dragHandle.on('touchstart', stopProp);，或者更好的是，jQuery.on将接受一个逗号分隔的事件列表: dragHandle.on('touchstart touchmove touchend touchcancel', function(e) { e.stopPropagation(); }); - rjmunro