Question

我正在绘制一个面积图，并在图表旁边为用户提供一些额外的控件来更改当前所选点的值。我还使用资源管理器选项来提供缩放和平移。

我面临两个缩放问题：

1）与谷歌地图相比，鼠标滚轮效果相反：向下滚动意味着放大！有没有选项来扭转车轮效应？

2）当用户更改所选点的值时，我会重新绘制图表以显示更改，但这会导致缩放重置。有没有办法在不重绘的情况下更改图表值，或者在重绘时保留缩放？

Answer 1

我放弃了内置的缩放功能，并选择以不同的方式处理它。

图表，或更好地说，包含图表和标记的“叠加层”放在一个具有如下样式的div中：

.myChartBox {
    border: 1px solid #2080c0;
    width: 900px;
    overflow-x: auto;
    overflow-y: hidden;
}

我不再使用图表资源管理器选项，我正在处理 wheel 事件，如下所示：

var currentZoom = 1;

function handleWheel(event) {
    event.preventDefault();
    if (event.deltaY < 0 && currentZoom < 8)
        currentZoom *= 2;
    else if (event.deltaY > 0 && currentZoom > 1)
        currentZoom /= 2;
    myChartOptions.width = 900 * currentZoom;
    myChart.draw(myChartData, myChartOptions);
}

用户现在可以使用鼠标滚轮以与谷歌地图相同的方式放大或缩小，并使用水平滚动条向左或向右滚动图表（平移实现也不困难）。我可以在任何时候更改数据时重绘图表，而不会失去缩放级别。

我仍然希望建议一些更好的解决方案。

Google Charts：更改数据时如何保持缩放

1 个答案: