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

Question

我使用的是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>

Answer 1

这是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，并在接收到轮子事件时模拟滚动。我认为这不是一个好的解决方案，但如果不能升级到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>