Question

我正在使用amchart，我想用这张图表制作动画图表。我几乎完成了这项工作，并添加了带有图片和标签的项目符号以进行描述。在项目符号中，标签以文本形式显示当前值。但是现在它已被覆盖，没有机会正确读取该值。请帮助我。

<!-- Styles -->
<style>
body { background-color: #30303d; color: #fff; }
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

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



// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


chart.data = [{
    "year" : 70,
    "vote" : 51
}
]

let yearAxis = chart.xAxes.push(new am4charts.ValueAxis());
yearAxis.min = 70
yearAxis.max = 80
// yearAxis.strictMinMax = true
// yearAxis.renderer.grid.template.disabled = true
let voteAxis = chart.yAxes.push(new am4charts.ValueAxis());
voteAxis.min = 47
voteAxis.max = 53
// voteAxis.strictMinMax = true;
voteAxis.renderer.labels.template.adapter.add("text", function(text) {
  return text + "%";
});

let series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "vote";
series1.dataFields.valueX = "year";
series1.strokeWidth = 4;
series1.tensionX = 1;
series1.tensionY = 1;


// bullet at the front of the line
let bullet = series1.bullets.push(new am4charts.Bullet());
let image = bullet.createChild(am4core.Image);
image.href = "1.png";
image.width = 30;
image.height = 30;
image.horizontalCenter = "right";
image.verticalCenter = "middle";
let label = bullet.createChild(am4core.Label);
label.text = "{vote}"
label.width = 30
label.height = 30
label.fontSize = 20
label.horizontalCenter = "left";
label.verticalCenter = "middle";
console.log('lable', label)
// var valueLabel = series1.bullets.push(new am4charts.LabelBullet());
// valueLabel.label.text = "Hello";
// valueLabel.label.fontSize = 20;

series1.events.on("validated", function() {
    bullet.moveTo(series1.dataItems.last.point);
    bullet.validatePosition();
});


var interval;

var add1 = -0.08


function startInterval() {
    interval = setInterval(function() {
        var lastdataItem = series1.dataItems.getIndex(series1.dataItems.length - 1);
        if (lastdataItem.valueX > 80) {
            chart.data = [{
                "year" : 70,
                "vote" : 51
            }
            ]
            add1 = -0.08
            return
        }
        let newVal1 = lastdataItem.valueY + add1
        if (newVal1 > 53) {
            add1 = -0.08
        }
        if (newVal1 < 47) {
            add1 = 0.08
        }
        chart.addData(
            { year: lastdataItem.valueX + 0.1, vote: newVal1 },
            0
        );
    }, 1000);
}

startInterval();

}); // end am4core.ready()



</script>

<!-- HTML -->
<div id="chartdiv"></div>

这就是我所做的。

我需要清楚地显示文字。现在，每次我为图表添加新数据时，它都会被覆盖。

Answer 1

在CSS中请添加此代码

svg g>g>g>g[focusable="true"]:not(:last-child) {
  display:none;
}

Answer 2

我刚刚解决了这个问题。让bullet = series1.createChild（am4charts.Bullet）; 当我更改此设置时，一切正常。谢谢您的支持

如何防止标签在amchart中被覆盖？

2 个答案: