HighCharts饼图

HighCharts官网


饼图

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>饼图</title>

			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
			<script src="js/highcharts.src.js"></script>
			<script src="js/exporting.src.js"></script>
	<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014浏览器市场份额'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
    

		</script>
	</head>
	<body>


<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

	</body>
</html>


转载于:https://www.cnblogs.com/whzhaochao/p/5023453.html

### 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、付费专栏及课程。

余额充值