如何禁用 amCharts 中的光标缩放？

Question

我有这个小任务要使用 amCharts 创建函数图。

问题是我需要启用光标，但也需要禁用缩放，这样我才能将图形调整为背景图像。

文档说 chart.zoomEnabled = false; 禁用了缩放功能，但它似乎不起作用，我不知道我可能遗漏了什么。

谢谢！

    <style> 
        .graphContainer {
            width: 500px;
            height: 500px;
        }
    </style>

    <script src="node_modules/ng"></script>
    <script> let targetGroup =2; </script>

    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

    <div class = "graphContainer" id="divElasticidad"></div>

    <script type="text/javascript"> 
        let sensor = { "value": 85 };
        let mostrarComoPorcentajes = true;
    </script>

    <script type="text/javascript"> 
        am4core.ready(function() {

            // Themes begin
            am4core.useTheme(am4themes_animated);
            // Themes end

            // Check if use percent or full value
            let ejeX = "X";
            let ejeY = "Y";
            if (mostrarComoPorcentajes){
                ejeX = "x";
                ejeY = "y";
            }

            // Create chart instance
            var chart = am4core.create("divElasticidad", am4charts.XYChart);
            chart.paddingRight = 20;
            chart.zoomEnabled = false;

            // Add data
            let A = 1;
            let data = [];
            for (let i = 0; i < 1001; i++) {
                data.push({
                    "x": i / 10,
                    "X": 1715.2 * i / 10 / 100,
                    "y": A * i/10,
                    "Y": A * 1715.2 * i / 10 / 100
                });
            }
            let sensor = { "value": 85 }
            let dataSensor = [{
                "x": sensor.value,
                "X": 1715.2 * sensor.value / 100,
                "y": A * sensor.value,
                "Y": A * 1715.2 * sensor.value / 100
            }];

            chart.data = data;

            /* Background Image */
            var image = chart.createChild(am4core.Image);
            image.align = "center";
            image.href = "imagenFondoFuncionElasticidad.png";
            image.isMeasured = false;
            image.width = am4core.percent(100);
            image.height = am4core.percent(100);
            image.x = am4core.percent(50);
            image.y = am4core.percent(50);
            image.zIndex = -1000;
            image.horizontalCenter = "middle";
            image.verticalCenter = "middle"

            // Create axes
            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            categoryAxis.dataFields.category = ejeX;
            categoryAxis.renderer.minGridDistance = 50;
            categoryAxis.renderer.grid.template.location = 0.5;
            categoryAxis.startLocation = 0.5;
            categoryAxis.endLocation = 0.5;
            categoryAxis.min = -100;
            categoryAxis.max = 1500;

            // Create value axis
            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.baseValue = 0;

            // Create series
            var series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.valueY = ejeY;
            series.dataFields.categoryX = ejeX;
            series.strokeWidth = 2;
            series.tensionX = 0.77;
            series.data = data;

            var series2 = chart.series.push(new am4charts.LineSeries());
            series2.dataFields.valueY = ejeY;
            series2.dataFields.categoryX = ejeX;
            series2.strokeWidth = 2;
            series2.tensionX = 0.77;
            series2.data = dataSensor;
            let bullet2 = series2.bullets.push(new am4charts.Bullet());
            let circle2 = bullet2.createChild(am4core.Circle);
            circle2.width = 8;
            circle2.height = 8;
            circle2.horizontalCenter = "middle";
            circle2.verticalCenter = "middle";
            circle2.stroke = am4core.color("#999999");
            circle2.strokeWidth = 2;
            circle2.fill = am4core.color("#555555");

            // bullet is added because we add tooltip to a bullet for it to change color
            var bullet = series.bullets.push(new am4charts.Bullet());
            bullet.tooltipText = "{valueY}";

            bullet.adapter.add("fill", function(fill, target) {
                if (target.dataItem.valueY < 0) {
                    return am4core.color("#FF0000");
                }
                return fill;
            })
            var range = valueAxis.createSeriesRange(series);
            range.value = 0;
            range.endValue = -1000;
            range.contents.stroke = am4core.color("#FF0000");
            range.contents.fill = range.contents.stroke;

            chart.cursor = new am4charts.XYCursor();
            chart.cursor.behaviour = "none";
        });
    </script>

Answer 1

没有这样的属性叫做 zoomEnabled。你可能会想到 mouseZoomEnabled，这是一个 v3 属性.

如果要在 v4 中禁用光标缩放，请将光标 behavior 设置为 "none"，如 here 中所述。请注意，属性名称使用的是美式英语 behavior 拼写，没有 u.

chart.cursor.behavior = "none";

如何禁用 amCharts 中的光标缩放？

How to disable cursor zoom in amCharts?

javascript

amcharts

amcharts4