如何在 amcharts 中获取悬停切片的颜色?
How to get color of hovered slice in amcharts?
我目前在我的项目中使用 amcharts。我已经使用
覆盖了默认工具提示
pieSeries.slices.template.tooltipHTML = //MY HTML HERE FOR THE TOOLTIP
在 HTML 中,我希望背景颜色与悬停的切片颜色相同。我已经浏览了文档,但找不到任何东西。我在想的是,如果我可以获得悬停事件,那么如果我获得当前悬停切片的颜色或索引(假设我可以从其实例中获取切片的颜色),我可以设置我的颜色 HTML 元素来自 Javascript。但我不知道,也许有一种直接的方法可以实现这一目标,因为这并不是一个罕见的要求。有什么建议吗?
似乎 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>
(示例基于 this amCharts demo)
无论是使用自定义颜色还是通过删除此行的主题颜色,这都适用:
pieSeries.slices.template.propertyFields.fill = "color";
所以可能这个 属性 在您的代码的其他地方被覆盖了。您可以通过添加此行 (more details here):
强制工具提示具有相同的填充颜色
chart.tooltip.getFillFromObject = true;
编辑:颜色也可以在工具提示 HTML 中通过 "{color}"
访问,这样它就可以用在样式属性中,例如。
我目前在我的项目中使用 amcharts。我已经使用
覆盖了默认工具提示pieSeries.slices.template.tooltipHTML = //MY HTML HERE FOR THE TOOLTIP
在 HTML 中,我希望背景颜色与悬停的切片颜色相同。我已经浏览了文档,但找不到任何东西。我在想的是,如果我可以获得悬停事件,那么如果我获得当前悬停切片的颜色或索引(假设我可以从其实例中获取切片的颜色),我可以设置我的颜色 HTML 元素来自 Javascript。但我不知道,也许有一种直接的方法可以实现这一目标,因为这并不是一个罕见的要求。有什么建议吗?
似乎 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>
(示例基于 this amCharts demo)
无论是使用自定义颜色还是通过删除此行的主题颜色,这都适用:
pieSeries.slices.template.propertyFields.fill = "color";
所以可能这个 属性 在您的代码的其他地方被覆盖了。您可以通过添加此行 (more details here):
强制工具提示具有相同的填充颜色chart.tooltip.getFillFromObject = true;
编辑:颜色也可以在工具提示 HTML 中通过 "{color}"
访问,这样它就可以用在样式属性中,例如。