Highcharts饼图

var stock = Highcharts.chart('stock', option_13);


// 股东信息分布环形图
        var option_13 = {
            chart: {
                //图表的大小在这里改  
                type: 'pie',
                width: 780,
                height: 380,
                backgroundColor: '#fff'
            },
            title: {
                text: ''
            },
            legend: {
                enabled: true,//打开或关闭图例。
                align: 'left', //水平方向位置
                verticalAlign: 'bottom',//垂直方向位置,
                labelFormatter: function () {//格式化标签,在饼图图例内显示百分比
                    return this.name + '(' + this.percentage + '%)';
                }
            },
            plotOptions:
            {
                pie: {
                    allowPointSelect: false,//点击饼图不位移
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false,
                        color: '#444',
                        style: {
                            fontWeight: 'normal',
                            fontSize: '20px',
                            "textShadow": 'none'
                        },
                        formatter: function () {
                            //this 为当前的点(扇区)对象,可以通过  console.log(this) 来查看详细信息
                            return this.point.name + ' ' + this.point.y + '%';
                        }
                    },
                    innerSize: '0',//饼状图的内径大小
                    point: {
                        events: {
                            legendItemClick: function (e) {
                                return false; // 直接 return false 即可禁用图例点击事件
                            }
                        }
                    }
                }
            },
            tooltip: {
                valueSuffix: '%',
            },
            series: [{
                //这是鼠标悬停时的颜色  
                name: '占比',
                //自定义颜色  
                //data:tenderMethod
                showInLegend: true,
                data: [{
                    name: '股1',
                    color: "#1a8194",
                    y: 51
                }, {
                    name: '股2',
                    color: "#f3b23a",
                    y: 40.03
                }, {
                    name: '股3',
                    color: "#e8445c",
                    y: 4.8
                }, {
                    name: '股4',
                    color: "#14ac95",
                    y: 4.17
                }]
            }]

};

### Highcharts 实现悬浮效果方法 在 Highcharts 中,默认支持鼠标悬停交互功能。当用户将鼠标指针移动到某个扇区上时会触发特定的效果,比如放大显示、改变颜色或其他样式变化。 #### 启用或配置悬停事件 通过设置 `plotOptions.pie.states.hover` 属性可以控制悬停状态下表的行为[^1]: ```javascript plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', states: { hover: { brightness: 0.1, // 控制亮度增加量 color: '#FFFFFF', // 设置高亮的颜色 (可选) halo: { // 光晕效果 size: 10, opacity: 0.75 } } }, dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } } ``` 此段代码定义了一个简单的配置,其中包含了对悬停状态下的处理逻辑。具体来说,`brightness` 参数用于调整被选中的部分相对于原始颜色的明亮度;而 `halo` 则用来创建围绕着选定区域的一个光晕效果[^2]。 另外,如果希望禁用这种悬停反应,则可以在相同位置简单地将整个 `hover` 对象设为空对象 `{}` 或者直接删除它即可[^3]。 #### 自定义悬停行为 除了上述基本设定外,还可以利用 JavaScript 的回调函数来自定义更多复杂的悬停响应动作。例如监听并响应 `mouseOver` 和 `mouseOut` 事件来执行额外的操作[^4]: ```javascript series: [{ type: 'pie', name: 'Browser share', events: { mouseOver: function(event) { console.log('Mouse over:', event.point); // 可在此处添加自定义操作 }, mouseOut: function(event) { console.log('Mouse out:', event.point); // 可在此处添加自定义操作 } }, data: [ ['Firefox', 45.0], ['IE', 26.8], ... ] }] ``` 这段脚本展示了如何捕捉用户的鼠标的进出事件,并打印出相应的日志信息。当然也可以在这里加入其他类型的互动机制,如更新页面上的某些元素或是播放声音提示等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值