如何获取 amcharts 中悬停切片的颜色?

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

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

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


函数式编程
浏览 110回答 1
1回答

POPMUISE

似乎 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 instancevar chart = am4core.create("chartdiv", am4charts.PieChart);// Add datachart.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 Seriesvar 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}",以便它可以在样式属性中使用,例如。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript