JavaScript
怎么在饼状图上添加点击事件
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区function zdATu() {
var chart = Highcharts.chart('zdTu', {
title: {
text: '重点工作'
},
chart:{
height:280
//width:300
},
exporting: {
enabled:false
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
showInLegend: true // 设置饼图是否在图例中显示
}
},
colors:[
'#2cbf4d',//第一个颜色，欢迎加入Highcharts学习交流群294191384
'#ecb60c',//第二个颜色
'#d83617'//第三个颜色
],
series: [{
type: 'pie',
name: '重点工作比例',
data: [
{
name: '完成',
y: listDept[0].comNum+1,
sliced: true, // 默认突出
selected: true // 默认选中
},
//['完成', listDept[0].comNum+1],
['未完成', listDept[0].unComNum],
['逾期', listDept[0].yqNum]
]
}]
});
}
var chart = Highcharts.chart('zdTu', {
title: {
text: '重点工作'
},
chart:{
height:280
//width:300
},
exporting: {
enabled:false
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
showInLegend: true // 设置饼图是否在图例中显示
}
},
colors:[
'#2cbf4d',//第一个颜色，欢迎加入Highcharts学习交流群294191384
'#ecb60c',//第二个颜色
'#d83617'//第三个颜色
],
series: [{
type: 'pie',
name: '重点工作比例',
data: [
{
name: '完成',
y: listDept[0].comNum+1,
sliced: true, // 默认突出
selected: true // 默认选中
},
//['完成', listDept[0].comNum+1],
['未完成', listDept[0].unComNum],
['逾期', listDept[0].yqNum]
]
}]
});
}
...全文
相关推荐
IOS可点击饼状图绘制
在iOS开发中，饼状图是一种常见的数据可视化方式，它能直观地展示各个部分与整体之间的比例关系。本文将深入探讨如何在Objective-C中实现一个可点击的饼状图，并处理点击事件，显示所选部分的百分比。
Echarts 展示——对饼状图上的各模块添加点击事件
然后，使用 echarts.init 方法创建了一个 ECharts 实例，并设置了饼状图的数据。接着，使用 myChart.on 方法监听了饼状图的 ‘click’ 事件，并在回调函数中获取被点击项的名称和数值，并将其输出到控制台和一个弹窗中。最后，使用 myChart.setOption(option) 将配置项应用到 ECharts 实例中，从而显示饼状图。当用户点击饼状图上的各个模块时，我们可以通过 JavaScript 监听 click 事件来实现相应的交互逻辑。
Android利用View绘制饼状图，折线图，柱状图等
最后，可以添加点击事件，使得点击扇区时能有相应的反馈。二、柱状图柱状图用于比较不同类别的数据，每个柱子的高度表示对应的数值。
饼状图：AChartengineDemoAndroid源码
**交互功能** AChartEngine支持点击事件，当用户点击饼状图的某个扇区时，可以监听到点击事件并做出相应操作，如显示详细信息或者跳转到其他页面。7.
android实现的饼状图
在实际应用中，根据需求对饼状图进行修改是非常常见的。例如，你可以调整颜色、添加图例、改变字体样式、设置点击事件等。
