`

Highcharts的donut图,中心圆圈的文字居中

阅读更多

转自:http://stackoverflow.com/questions/17286457/how-to-center-text-inside-donut-chart-embedded-in-combination-chart

 

$('#container').highcharts({

        chart: {

            events: {

                load: function() {

                    var chart = this,

                        rend = chart.renderer,

                        pie = chart.series[4],

                        left = chart.plotLeft + pie.center[0],

                        top = chart.plotTop + pie.center[1],

                        text = rend.text("text", left,  top).attr({ 'text-anchor': 'middle'}).add();

 

                    text.on("mouseover", function() {

                       alert("hover!"); 

                    });

 

                }

            }

        }, 

        ...

     });

 

重点是:

'text-anchor: middle',

left = chart.plotLeft + pie.center[0],

top = chart.plotTop + pie.center[1],

left和top的值是圆心的位置

 

 

分享到:
评论

相关推荐

    highCharts 展示图片示例

    highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ,赐教一下!

    Highcharts 导出图片

    Highcharts 导出图片,具体的图片导出的代码,带吗代码代码代码

    highcharts导出图片的后台代码

    highcharts导出图片的后台代码,这样就不用从highcharts官网服务器上进行图片导出了,成了一个本地的服务器!

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    highcharts 导出图片 例子 .net C# Demo

    HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...

    Highcharts实现图形报表

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在网页上创建出各种高质量的数据可视化图形,如柱状图、线图、饼图、散点图等。在本项目中,“Highcharts实现图形报表”旨在利用Highcharts的功能,...

    处理highcharts导出图片出现中文乱码的问题

    总的来说,解决Highcharts导出图片中的中文乱码问题需要综合考虑前端的Highcharts配置、后端的服务器环境、中间可能涉及的代理服务以及所有环节的字符编码设置。通过仔细排查并尝试上述方法,应该能够成功解决这个...

    highcharts 导出图片 例子 .net C# Demo 工具类

    HighCharts是一款广泛应用于Web开发中的JavaScript图表库,用于创建各种数据可视化效果,如折线图、柱状图、饼图等。在实际项目中,有时我们需要将这些动态生成的图表导出为静态图片,以便于打印、分享或离线查看。...

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的图表,包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中,雷达图常用于展示多维数据,每个轴代表一个特性或指标,数据点则...

    highcharts 导出图片 .net c#Demo例子

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,如折线图、柱状图、饼图等。它支持SVG(可缩放矢量图形)技术,可以提供高质量的视觉表现。在.NET C#环境中,如果你想利用Highcharts...

    Highcharts导出图片到本地指定路径

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如折线图、柱状图、饼图等。在实际应用中,我们有时需要将这些图表以图片的形式保存下来,以便于报告、分享或者离线查看。本文将...

    Highcharts实时趋势图

    Highcharts支持多种图表类型,如折线图(line)、面积图(area)、柱状图(column)等。数据通常以JSON格式提供,每一项代表一个数据点,包含x轴和y轴的值。对于实时趋势图,x轴通常是时间戳,y轴是对应的时间序列...

    前端用Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    在前端开发中,数据可视化是不可或缺的一部分,Highcharts是一个强大的JavaScript图表库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及我们这里关注的Venn图(韦恩图)。Venn图是一种特殊的图表,常用于...

    Highcharts 构建曲线图

    Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种数据可视化效果,包括曲线图、柱状图、饼图等。在这个"Highcharts构建曲线图"的实例中,我们将深入探讨如何利用Highcharts来绘制一个基本的曲线图...

    highcharts曲线图,饼状图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中,...

    highCharts-时序图

    在"时序图"这个场景中,HighCharts被用来展示实时更新的数据,就像心电图一样连续不断地展示时间序列信息。这种类型的图表对于监控动态变化的数据非常有用,比如在金融市场的股票价格跟踪、物联网设备的状态监测或者...

    highcharts本地导出图片案例

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种数据可视化图表,如折线图、柱状图、饼图等。在实际应用中,有时我们需要将这些图表导出为图片格式,以便于保存、打印或分享...

    Highcharts-9.3.2.zip

    最后,Highcharts提供了多种图表类型,包括折线图、柱状图、饼图、散点图、面积图、热力图等,这些丰富的图表类型覆盖了数据分析和展示的多个场景,为开发者提供了极大的便利。 标签"Highcharts charts"进一步强调...

    highcharts曲线图

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动图表,包括折线图、柱状图、饼图等多种类型。"highcharts曲线图"指的是利用Highcharts库生成的曲线图表,这种图表通常用于展示随时间变化的...

Global site tag (gtag.js) - Google Analytics