要更改Apex Chart环形图中的工具提示背景颜色,可以按照以下步骤执行:
-
在Apex Chart配置中添加tooltip对象,并设置background选项的颜色值。
-
在series对象中,设置data对象中的tooltip选项为true。
以下是完整的示例代码:
HTML代码:
<div id="chart"></div>
JavaScript代码:
var options = {
series: [44, 55, 13, 33],
chart: {
type: 'donut',
},
tooltip: {
enabled: true,
y: {
formatter: function(val) {
return val + "%";
}
},
style: {
background: '#333',
color: '#fff'
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560'],
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
dataLabels: {
enabled: true,
dropShadow: {
enabled: false,
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在这个示例中,我们创建了一个带有4个数据点的环形图,数据分别为Apples、Oranges、Bananas和Berries。我们设置了工具提示和数据标签,并将环形图的颜色设置为蓝色、绿色、黄色和红色。在tooltip对象中,我们设置了背景颜色为#333,前景颜色为白色。在series对象中,我们启用了每个数据点的工具提示。
执行此代码将生成带有定制工具提示背景颜色的环形图。