javascript 当用户在Amcharts中悬停任何条形时,是否可以在条形顶部显示任何图像

2q5ifsrm  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(100)

我在amcharts上工作,我的要求是显示一个图像和图像顶部的值,当用户悬停在任何一列时,是否可以在amcharts中使用版本4?

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}, {
  "country": "Brazil",
  "visits": 395
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

正如我们所看到的,当我们悬停任何列时,它会向我显示一个工具提示,但我想在顶部显示图像,当用户悬停任何列时,在图像顶部显示其值,请参见随附的图像。

有一个图表上的图像的例子,但我需要显示图像时,其悬停
https://www.amcharts.com/demos-v4/column-chart-images-top-v4/

bqf10yzr

bqf10yzr1#

是的,你可以这样做。你需要这个额外的配置,特别是tooltipHTML

series.columns.template.tooltipHTML = '<div class="tooltip"><div><strong>{valueY}</strong></div><img src="https://cdn.pixabay.com/photo/2012/04/26/19/47/penguin-42936_960_720.png" alt="Linux"></div>';
series.columns.template.tooltipY = am4core.percent(0);
series.tooltip.pointerOrientation = "vertical";
series.tooltip.fontSize = 10;
series.tooltip.getFillFromObject = false;
series.tooltip.label.fill = "#000000";
series.tooltip.background.fill = "rgba(0, 0, 0, 0)";
series.tooltip.background.stroke = "rgba(0, 0, 0, 0)";
series.tooltip.background.filters.clear();
.tooltip {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tooltip img {
  width: 15px;
  height: 15px;
}
    • 警告**来自文档:文本与HTML

旧的Internet Explorer浏览器不支持HTML工具提示。导出图表时,此类工具提示也不会导出为图像。
如果tooltipTexttooltipHTML都被设置,后者在支持它的浏览器上优先,在旧的浏览器上则回到前者,这一点很重要。如果你想普遍支持所有浏览器,同时设置这两个选项可能是一个好策略。
如果我把上面的代码放到你的例子中,我们会得到下面的结果:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

相关问题