Amcharts显示/隐藏自定义图像项目符号

Question

我对amchart时间表有疑问。 我有一个由两条线组成的折线图，这是买卖。 还有4个按钮可以更改显示时间，在我删除它们的示例中，它不起作用。 有一些自定义点，我希望在悬停时成对显示（每行），并在聚焦时隐藏。 最初设置“隐藏”，然后（模糊或focusOut）在“显示”中更改它的单声道属性是什么？ When hovered

    am4core.ready(function() {

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

// Create chart
        var chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.padding(30, 0, 0, 0);
        var colorSale = "#75af26";
        var colorBuy = "#269cb5";
// Load external data
        var data = [];
        var price1 = 100;
        var price2 = 150;
        var quantity = 1000;
        for (var i = 15; i < 30; i++) {
            price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
            price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);

            if (price1 < 100) {
                price1 = 100;
            }

            if (price2 < 100) {
                price2 = 100;
            }


            quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 500);

            if (quantity < 0) {
                quantity *= -1;
            }
            data.push({ date: new Date(2000, 0, i), price1: price1, price2:price2, quantity: quantity });
        }


        chart.data = data;

// the following line makes value axes to be arranged vertically.
        chart.leftAxesContainer.layout = "vertical";

// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;

        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location =  -0.001;
        dateAxis.renderer.ticks.template.length = 8;
        dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
        dateAxis.renderer.minLabelPosition = 0.01;
        dateAxis.renderer.maxLabelPosition = 0.99;
        dateAxis.keepSelection = true;
        dateAxis.renderer.fontSize = "13px";
        dateAxis.renderer.labels.template.fill = am4core.color("#767676");
        dateAxis.renderer.grid.template.fill = am4core.color("#d8d8d8");
        dateAxis.minHeight = 30;


        dateAxis.groupData = true;
        dateAxis.maxZoomLevel = 0;



        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.zIndex = 1;
        valueAxis.renderer.baseGrid.disabled = true;
// height of axis
        valueAxis.height = am4core.percent(65);
        valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
        valueAxis.renderer.inside = true;
        valueAxis.renderer.labels.template.verticalCenter = "bottom";
        valueAxis.renderer.labels.template.padding(2, 2, 2, 2);
        valueAxis.renderer.labels.template.fill = am4core.color("#767676");
        valueAxis.renderer.grid.template.fill = am4core.color("#d8d8d8");


        valueAxis.renderer.fontSize = "13px"
        valueAxis.renderer.fontSize

        var series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "date";
        series.dataFields.valueY = "price1";
        series.tooltipText = "{valueY.value}";
        series.name = "MSFT: Value";
        series.strokeWidth = 3;
        series.stroke = am4core.color(colorSale);
        series.tensionX = 0.77;
        series.defaultState.transitionDuration = 0;



// volume should be summed
        var series2 = chart.series.push(new am4charts.LineSeries());
        series2.dataFields.dateX = "date";
        series2.dataFields.valueY = "price2";
        series2.tooltipText = "{valueY.value}";
        series2.name = "MSFT: Value";
        series2.strokeWidth = 3;
        series2.stroke = am4core.color(colorBuy);
        series2.tensionX = 0.77;
        series2.defaultState.transitionDuration = 0;

        chart.cursor = new am4charts.XYCursor();


        var bullet = series.bullets.push(new am4charts.Bullet());
        var image1 = bullet.createChild(am4core.Image);
        image1.href = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/620px-Approve_icon.svg.png";
        image1.width = 50;
        image1.height = 50;
        // image1.hide();
        image1.horizontalCenter = "middle";
        image1.verticalCenter = "middle";
        // image1.y = 10;

        var bullet2 = series2.bullets.push(new am4charts.Bullet());
        var image2 = bullet2.createChild(am4core.Image);
        image2.href = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/620px-Approve_icon.svg.png";
        image2.width = 50;
        image2.height = 50;
        // image2.hide();
        image2.horizontalCenter = "middle";
        image2.verticalCenter = "middle";
        // image2.y = 10;

        bullet.events.on("over", handleImageOver);
        function handleImageOver(event) {

        }

        bullet2.events.on("over", handleImageOver);
        function handleImageOver(event) {

        }


        // Make a panning cursor
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "none";
        

    }); // end am4core.ready()

#chartdiv{
   height: 600px
}

<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/animated.js"></script>
<div id="chartdiv"></div>

还有一件事，也许有人知道是否可以绘制图表的顶部和底部，以便图像可以位于图表的顶部 the image is cropped by the borders of the graph