javascript - 将图标添加到 amCharts 工具提示

Question

我使用 amCharts Javascript 库创建了一个简单的图表。它有一个简单的工具提示，负责显示每个柱的值(用户的点数)。

这就是我要说的:

现在我想更进一步，在工具提示中的每个值后面显示一个小图像或图标。像这样的东西:

这是解释我们如何处理创建 Tooltips with rich HTML content 的链接.

不幸的是，由于它的复杂性和我的经验不足，我无法处理它。但我确定应该有一种方法可以将其存档...

这是我的 Javascript 代码:

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

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
var myVar = { 
    Red: "#f72c69",
    Normal: "#6887cc",
};

var userA_points = 22;
var userB_points = 20;
var userC_points = 6;
var members_points = 12;
var max_points = Math. max(userA_points, userB_points, userC_points, members_points);
var maxPlus = (max_points + 10)
maxPlus = Math.min(200, Math.max(0, maxPlus));
console.log(maxPlus);

if(userA_points < members_points){
    var colorCompare = myVar.Red
} else {
    var colorCompare = myVar.Normal
}


// Add data
chart.data = [{
    "name": "Damon",
    "points": userA_points,
    "color": "#5479f2",
    "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png",
    "bullet2": "Diamonds.png"
}, {
    "name": "filip",
    "points": userB_points,
    "color": "#5479f2",
    "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
    "bullet2": "Diamonds.png"
}, {
    "name": "Patrick",
    "points": userC_points,
    "color": "#5479f2",
    "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
    "bullet2": "Diamonds.png"
}, {
    "name": "All Members",
    "points": members_points,
    "color": colorCompare,
    "bullet": "Members.png",
    "bullet2": "Diamonds.png"
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.fill = am4core.color("#fff");
categoryAxis.renderer.labels.template.fontSize = 20;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeDasharray = "4,4";
valueAxis.renderer.labels.template.disabled = false;
valueAxis.renderer.labels.template.fontSize = 15;
valueAxis.renderer.labels.template.fontWeight = "800";

valueAxis.min = 0;
valueAxis.max = maxPlus;
valueAxis.strictMinMax = true;  
valueAxis.renderer.minGridDistance = 25;

// Do not crop bullets
chart.maskBullets = false;

// Remove padding
chart.paddingBottom = 0;
chart.paddingTop = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "points";
series.dataFields.categoryX = "name";
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";
series.columns.template.column.cornerRadiusTopLeft = 25;
series.columns.template.column.cornerRadiusTopRight = 25;
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/b]";


// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 120;
image.height = 120;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 70;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

// Add bullets
var bullet2 = series.bullets.push(new am4charts.Bullet());
var image = bullet2.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 60;
image.dx = 50;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet2";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

HTML 代码:

<!-- Resources -->
<script language="JavaScript" src="amcharts4/core.js"></script>
<script language="JavaScript" src="amcharts4/charts.js"></script>
<script language="JavaScript" src="amcharts4/themes/animated.js"></script>

<div id="chartdiv"></div>
  <link rel="stylesheet" href="Style.css">
  <script src="Script.js"></script>

CSS 代码:

#chartdiv {
  width: 1500px;
  height: 750px;
}

body {  
    margin: 90 100 100 20;
    background-color: transparent;
    overflow:hidden;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);   
 }

感谢任何解决方案...

Answer 1

你应该使用 tooltipHTML而不是 tooltipText .您可以在那里使用 HTML 来设计工具提示。要添加图像，只需使用 <img>标签:

series.columns.template.tooltipHTML = "<img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>POINTS {valueY.value}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span>";

我创建了一个 code pen作为引用，但大多数图像在那里不起作用。