如何为lightningChartJs启用默认浏览器滚动行为？

如何解决如何为lightningChartJs启用默认浏览器滚动行为？

我正在使用LightningChartJs 1.3.1。并在可滚动的页面上显示图表。

当鼠标指针悬停在图表上时，页面将不再滚动。

我尝试了chart.setMouseInteractions(false)，但没有成功。

在带触摸板的Mac上尝试过。不确定鼠标滚轮是否具有相同的行为。

请参见以下示例：

const {
    lightningChart,AxisTickStrategies
} = lcjs

const chart = lightningChart().ChartXY({
    containerId: "chart",defaultAxisXTickStrategy: Object.assign({},AxisTickStrategies.Numeric)
});

chart.setMouseInteractions(false);

.wrapper {
    with: 100%;
    height: 1000px;
    background: #FFFFF0;
}
h1 {
    text-align: center;
    margin-bottom: 200px;
    padding: 20px;
}

<div class="wrapper">
   <h1>Please scroll down!</h1>
   <div id="chart"></div>
</div>

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

解决方法

这是LightningChart JS v1.3.1及更低版本中的一个已知问题。它已在v2.0.0及更高版本中修复。

我复制了您使用的示例，但将其切换为使用LightningChart JS v2.0.2，并且可以滚动页面。当鼠标/触摸事件未在图表内引发任何动作时，鼠标和触摸事件会通过图表传递给默认浏览器行为。如果图表对事件执行操作，则事件将在图表内停止。这使使用变得简单直观。

const {
  lightningChart,AxisTickStrategies
} = lcjs

const chart = lightningChart().ChartXY({
  container: "chart"
});

chart.setMouseInteractions(false);

.wrapper {
  with: 100%;
  height: 1000px;
  background: #FFFFF0;
}

h1 {
  text-align: center;
  margin-bottom: 200px;
  padding: 20px;
}

<div class="wrapper">
  <h1>Please scroll down!</h1>
  <div id="chart"></div>
</div>

<script src="https://unpkg.com/@arction/lcjs@2.0.2/dist/lcjs.iife.js"></script>

或者，您可以将侦听器附加到图表容器div，并在收到wheel事件时模拟滚动。我认为这不是一个好的解决方案，但是如果无法升级到LightningChart JS v2.0.2，那么这将是唯一的方法。

const {
  lightningChart,AxisTickStrategies
} = lcjs

const chart = lightningChart().ChartXY({
  containerId: "chart"
});

chart.setMouseInteractions(false);

const container = document.getElementById('chart')

container.addEventListener('wheel',(ev) => {
  if (ev.deltaMode === 1 && window.scrollByLines) {
    window.scrollByLines(ev.deltaY)
  } else {
    window.scrollBy(ev.deltaX,ev.deltaY)
  }
})

.wrapper {
  with: 100%;
  height: 1000px;
  background: #FFFFF0;
}

h1 {
  text-align: center;
  margin-bottom: 200px;
  padding: 20px;
}

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

<div class="wrapper">
  <h1>Please scroll down!</h1>
  <div id="chart"></div>
</div>