如何禁用 cursor 放大 amCharts？

Question

我有这个小任务来使用 amCharts 创建一个 function 图。

问题是我需要启用 cursor，但也需要禁用缩放，所以我可以将图形调整为背景图像。

文档说使用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 中禁用 cursor 缩放，请将 cursor behavior设置为"none" ，如此处所述。 请注意，属性名称使用的是美国英语的行为拼写，没有 u。

chart.cursor.behavior = "none";