amCharts5 - 從工具提示中刪除十字准線？

Question

我正在使用 amCharts5 制作一個簡單的氣泡圖。 該庫有一個看起來像十字准線的內置工具提示，我想刪除十字准線但保留工具提示。 我一直沒能找到一種方法來完成這個。

請參閱下面的代碼片段以了解十字准線的外觀，這里還有一個代碼筆。

我嘗試根據文檔添加這些行：

cursor.lineY.setAll({
  visible: false

cursor.lineX.setAll({
  visible: false
});

結果是十字線被隱藏了，但是出現在每個十字線末端的小工具提示仍然出現，看起來很混亂和奇怪。

 // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv"); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create chart // https://www.amcharts.com/docs/v5/charts/xy-chart/ var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: true, panY: true, wheelY: "zoomXY", pinchZoomX:true, pinchZoomY:true })); chart.get("colors").set("step", 2); // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }), tooltip: am5.Tooltip.new(root, {}) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}), tooltip: am5.Tooltip.new(root, {}) })); // Create series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push(am5xy.LineSeries.new(root, { calculateAggregates: true, xAxis: xAxis, yAxis: yAxis, valueYField: "y", valueXField: "x", valueField: "value", tooltip: am5.Tooltip.new(root, { labelText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" }) })); // Add bullet (add circles that appear on the chart) // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets var circleTemplate = am5.Template.new({}); series.bullets.push(function() { var graphics = am5.Circle.new(root, { fill: series.get("fill"), }, circleTemplate); return am5.Bullet.new(root, { sprite: graphics }); }); series.strokes.template.set("strokeOpacity", 0); // Add cursor \\ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/ chart.set("cursor", am5xy.XYCursor.new(root, { xAxis: xAxis, yAxis: yAxis, snapToSeries: [series] })); // Sample data var data = [{ "y": 69, "x": 1, "value": 69, "name": "sue" }, { "y": 69, "x": 2, "value": 69, "name": "john" }, ] series.data.setAll(data); chart.appear(1000, 100);

 #chartdiv { width: 100%; max-width: 100%; height: 250px; }

 <:-- Resources --> <script src="https.//cdn.amcharts.com/lib/5/index:js"></script> <script src="https.//cdn.amcharts.com/lib/5/xy:js"></script> <script src="https.//cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>

Answer 1

1.完全刪除cursor

刪除這段代碼：

chart.set("cursor", am5xy.XYCursor.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  snapToSeries: [series]
}));

從軸設置中刪除工具提示聲明：

tooltip: am5.Tooltip.new(root, {})

2.將剩余的工具提示聲明從系列移動到項目符號

您不需要此工具提示：

var series = chart.series.push(am5xy.LineSeries.new(root, {
  // ...
  tooltip: am5.Tooltip.new(root, {
    labelText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}"
  })
}));

相反，這樣做：

var circleTemplate = am5.Template.new({});

series.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: series.get("fill"),
    tooltipText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" // <--- HERE
  }, circleTemplate);

  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

---

這是經過這些小修改的代碼段：

 // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv"); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create chart // https://www.amcharts.com/docs/v5/charts/xy-chart/ var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: true, panY: true, wheelY: "zoomXY", pinchZoomX:true, pinchZoomY:true })); chart.get("colors").set("step", 2); // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); // Create series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push(am5xy.LineSeries.new(root, { calculateAggregates: true, xAxis: xAxis, yAxis: yAxis, valueYField: "y", valueXField: "x", valueField: "value" })); // Add bullet (add circles that appear on the chart) // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets var circleTemplate = am5.Template.new({}); series.bullets.push(function() { var graphics = am5.Circle.new(root, { fill: series.get("fill"), tooltipText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" // <--- HERE }, circleTemplate); return am5.Bullet.new(root, { sprite: graphics }); }); series.strokes.template.set("strokeOpacity", 0); // Sample data var data = [{ "y": 69, "x": 1, "value": 69, "name": "sue" }, { "y": 69, "x": 2, "value": 69, "name": "john" }, ] series.data.setAll(data); chart.appear(1000, 100);

 #chartdiv { width: 100%; max-width: 100%; height: 250px; }

 <:-- Resources --> <script src="https.//cdn.amcharts.com/lib/5/index:js"></script> <script src="https.//cdn.amcharts.com/lib/5/xy:js"></script> <script src="https.//cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>