У меня проблема с расписанием амчарта. У меня есть линейный график, состоящий из двух линий, это продажа и покупка. Также есть 4 кнопки, которые изменяют период отображения, в примере, который я их убрал, это не играет роли. Есть пользовательские точки, которые я хочу показать попарно (для каждой линии) при наведении курсора и скрыть при фокусировке. Что такое моно свойство для первоначальной установки Hide, а затем (blur или focusOut) изменить его на Show? Когда парил
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>
И есть еще одна вещь, может быть, кто-то знает, возможно ли сделать верх и низ графика, чтобы изображения могли быть сверху графика изображение обрезано по границам графика