amCharts 5 工具提示未显示在线条系列上

问题描述 投票:0回答:1

我试图让工具提示显示此折线图和数据集,每次我输入自己的数据时,它都会删除折线图,并且我在文档中找不到任何有关为什么会发生这种情况的信息。

理想情况下它只会显示 X 轴的值。

我这里有一个codepen https://codepen.io/ChazUK/pen/MWzgLrQ

var root = am5.Root.new("chartdiv");
root.dateFormatter.setAll({
  dateFormat: "MMM, yyyy",
  dateFields: ["valueX"]
});
root.setThemes([am5themes_Animated.new(root)]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {}));
var cursor = chart.set(
  "cursor",
  am5xy.XYCursor.new(root, {
    behavior: "none"
  })
);
cursor.lineY.set("visible", false);

// Data
var data = [
  { date: 1680737683000, ajf: 288.02, topix: 189.64 },
  { date: 1678059283000, ajf: 278.21, topix: 184.66 },
  { date: 1675640083000, ajf: 276.12, topix: 181.57 },
  { date: 1672961683000, ajf: 265.45, topix: 179.87 },
  { date: 1670283283000, ajf: 252.86, topix: 172.25 },
  { date: 1667691283000, ajf: 263.18, topix: 180.49 }
];

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "month", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {}),
    tooltip: am5.Tooltip.new(root, {})
  })
);

var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(
  am5xy.LineSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "ajf",
    valueXField: "date",
    tooltip: am5.Tooltip.new(root, {
      labelText: "{valueX}: {valueY}"
    })
  })
);

series.strokes.template.setAll({
  strokeWidth: 2
});

series.data.setAll(data);

series.appear(1000);
chart.appear(1000, 100);
tooltip amcharts amcharts5
1个回答
0
投票

我遇到了同样的问题,直到我添加了项目符号并将工具提示文本放入圆圈定义中。对于格式错误,我深表歉意,我在平板电脑上。

series.bullets.push(function(){
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 2, // you can make it small enough not to show
      tooltipText: '{valueY}' 
   }) 
 });
});
© www.soinside.com 2019 - 2024. All rights reserved.