时间戳

首页 > 解决方案 > 如何在amcharts中获得悬停切片的颜色？

javascript - 如何在amcharts中获得悬停切片的颜色？

问题描述

我目前在我的项目中使用 amcharts。我已经使用覆盖了默认工具提示

pieSeries.slices.template.tooltipHTML = //MY HTML HERE FOR THE TOOLTIP

在 HTML 中，我希望背景颜色与悬停的切片颜色相同。我浏览了文档，但找不到任何东西。我在想的是，如果我可以获得悬停事件，那么如果我获得当前悬停切片的颜色或索引（假设我可以从其实例中获得切片的颜色），我可以设置我的 HTML 的颜色通过 Javascript 元素。但我不知道，也许有一种直接的方法可以实现这一点，因为这并不是一个罕见的要求。有什么建议么 ？

标签： javascriptamchartsamcharts4

解决方案

似乎 amCharts 默认为工具提示设置相同的颜色，即使在设置自定义工具提示 HTML 时也是如此：

/**
 * ---------------------------------------
 * 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/
 * ---------------------------------------
 */

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

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9,
  "color": am4core.color("#ED1C24")
}, {
  "country": "Czechia",
  "litres": 301.9,
  "color": am4core.color("#235789")
}, {
  "country": "Ireland",
  "litres": 201.1,
  "color": am4core.color("#F1D302")
}, {
  "country": "Germany",
  "litres": 165.8,
  "color": am4core.color("#020100")
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.propertyFields.fill = "color";
pieSeries.slices.template.tooltipHTML = "<p>My custom tooltip color:  {color}</p>"

chart.legend = new am4charts.Legend();
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: 400px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

（基于此 amCharts 演示的示例）

无论是使用自定义颜色还是通过删除此行来使用主题颜色，这都是正确的：

pieSeries.slices.template.propertyFields.fill = "color";

所以也许这个属性在你的代码的其他地方被覆盖了。您可以通过添加此行来强制工具提示具有相同的填充颜色（更多详细信息在这里）：

chart.tooltip.getFillFromObject = true;

编辑：颜色也可以在工具提示 HTML 中通过 访问"{color}"，以便它可以在样式属性中使用，例如。

推荐阅读