亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何獲取 amcharts 中懸停切片的顏色?

如何獲取 amcharts 中懸停切片的顏色?

函數式編程 2023-11-12 15:32:48
我目前在我的項目中使用 amcharts。我已經使用覆蓋了默認的工具提示pieSeries.slices.template.tooltipHTML = //MY HTML HERE FOR THE TOOLTIP在 HTML 中,我希望背景顏色與懸停的切片顏色相同。我已瀏覽文檔但找不到任何內容。我在想的是,如果我可以獲取懸停事件,那么如果我獲取當前懸停切片的顏色或索引(假設我可以從其實例獲取切片的顏色),我可以設置 HTML 的顏色通過 JavaScript 的元素。但我不知道,也許有一種直接的方法可以實現這一點,因為這并不是一個罕見的要求。有什么建議 ?
查看完整描述

1 回答

?
POPMUISE

TA貢獻1765條經驗 獲得超5個贊

似乎 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}",以便它可以在樣式屬性中使用,例如。


查看完整回答
反對 回復 2023-11-12
  • 1 回答
  • 0 關注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號