如何在打字稿中的Angular2高图表中添加鼠标滚轮代码

时间:2018-10-17 05:15:39

标签: angular highcharts angular2-highcharts

我需要在highcharts垂直滚动条中添加鼠标滚轮。我在http://jsfiddle.net/d3r8pb7c/这个小提琴中得到了代码,但是该代码是以jQuery格式编写的。当我尝试通过以下方式在打字稿中添加代码时,鼠标滚轮不起作用。

this.options = {
            chart: {

                events: {
                    wheel: function (event) {
                        var delta, extr, step, newMin, newMax, axis = this.xAxis[0];
                        var dataMax = this.xAxis[0].dataMax,
                            dataMin = this.xAxis[0].dataMin,
                            newExtrMin,
                            newExtrMax;

                        e = this.pointer.normalize(event);
                        delta = e.detail || -(e.deltaY / 120);
                        delta = delta < 0 ? 1 : -1;

                        if (this.isInsidePlot(e.chartX - this.plotLeft, e.chartY - this.plotTop)) {
                            extr = axis.getExtremes();
                            step = (extr.max - extr.min) / 5 * delta;

                            if ((extr.min + step) <= dataMin) {
                                newExtrMin = dataMin;
                                newExtrMax = extr.max;
                            } else if ((extr.max + step) >= dataMax) {
                                newExtrMin = extr.min;
                                newExtrMax = dataMax;
                            } else {
                                newExtrMin = extr.min + step;
                                newExtrMax = extr.max + step;
                            }

                            axis.setExtremes(newExtrMin, newExtrMax, true, false);

                        }

                        stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
                        return false;
                    },
                }
            },

如果有人在Highcharts angular2打字稿中添加了鼠标滚轮事件,请帮助我。

1 个答案:

答案 0 :(得分:2)

首先,代码不依赖jQuery,因此没有必要导入它。

我试图通过创建新模块并将其导入组件文件中来包括附件JSFiddle中的代码。实际上,我不知道您在做什么错,但是我的例子运行良好。

const redirect = (basePath, id, data) => `/author/${data.author_id}/show`;

export const PostEdit = (props) => {
    <Edit {...props}>
        <SimpleForm redirect={redirect}>
            ...
        </SimpleForm>
    </Edit>
);

实时示例: https://stackblitz.com/edit/highcharts-cloning-chart-s7kztw