使用 amCharts,如何在系列上方添加单个标签?

问题描述

amCharts 有没有办法给系列添加标签

我曾尝试使用项目符号,但它为我的每个数据点添加一个标签。我希望整个系列只有一个标签

这就是我现在所拥有的:

Two series with the word TARGET added over one

我的目标是只显示一次“TARGET”标签

JSfiddlehttps://jsfiddle.net/vs7hy8wr/3/

代码

var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.data = [{
    label: "2020-07-28 04:50:00",value: 210,target: 250
  },{
    label: "2020-07-28 05:25:00",value: 555,{
    label: "2020-07-28 07:35:00",value: 300,{
    label: "2020-07-28 09:40:00",value: 333,target: 280
  },{
    label: "2020-07-28 12:40:00",value: 554,target: 280
  }
];


// X axis
const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.inputDateFormat = 'YYYY-MM-DD HH:mm:ss';
dateAxis.tooltipDateFormat = 'HH:mm,d MMMM';
dateAxis.baseInterval = {
  timeUnit: "minute",count: 1
};

// Y axis
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// series
const series = chart.series.push(new am4charts.Lineseries());
series.datafields.valueY = 'value';
series.datafields.dateX = 'label';

const target = this.chart.series.push(new am4charts.Lineseries());
target.datafields.valueY = 'target';
target.datafields.dateX = 'label';

// bullet and tooltips
const circleBullet = series.bullets.push(new am4charts.CircleBullet());
circleBullet.tooltipText = 'Amount: {valueY}';

this.chart.cursor = new am4charts.XYCursor();
this.chart.cursor.xAxis = this.dateAxis;

const axisYTooltip = valueAxis.tooltip;
axisYTooltip.disabled = true;

const axisXTooltip = dateAxis.tooltip;

chart.maskBullets = false;

// this does not work
const speedBullet = target.bullets.push(new am4charts.LabelBullet());
speedBullet.label.text = 'TARGET';
speedBullet.label.fill = target.stroke;
speedBullet.label.dy = 10;
speedBullet.label.dx = 60;
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>

<div id="chartdiv"></div>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)