Highcharts 仪表使工具提示可见并居中

2023-12-06

当屏幕大小调整时,我无法让 Highcharts 仪表的牙尖出现并保持可见并在仪表内居中。

在我的小提琴中,您可以看到工具提示出现,然后在一小段时间后消失。此外,当调整窗口大小时,它不会保留在仪表的中心。

任何帮助表示赞赏。我的JSFIDDLE在这儿。

    gaugeChartObj = new Highcharts.Chart({
        credits: false,
        chart: {
            renderTo: divID,
            type: 'solidgauge',
            marginTop: 30,
            events: {
                load: function(){
                    var p = this.series[0].points[0];
                    this.tooltip.refresh(p);
                }
            }
        },
        title: {
            text: dataC.title,
            style: {
                fontSize: '16px'
            }
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            useHTML: true,
            shadow: false,
            style: {
                fontSize: '16px'
            },
            formatter: function() {
                return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
            },
            positioner: function (labelWidth) {
                return {
                    x: 170 - labelWidth / 2,
                    y: 125
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{
                outerRadius: '106%',
                innerRadius: '94%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                borderWidth: '12px',
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: true
            }
        },
        series: [{
            name: 'Subscriptions',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '100%',
                y: dataC.seriesData
            }]
        }],
        lang: {
            noData: "No data to display"
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#333333'
            }
        }
    });

您可以使用数据标签而不是工具提示来显示实体图表中的居中信息:http://api.highcharts.com/highcharts/plotOptions.solidgauge.dataLabels

dataLabels: {
      enabled: true,
      y: -40,
      borderWidth: 0,
      backgroundColor: 'none',
      useHTML: true,
      shadow: false,
      style: {
        fontSize: '16px'
      },
      formatter: function() {
        return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
      }
},

您可以在此处查看其工作原理的示例:http://jsfiddle.net/ujmxxf03/10/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts 仪表使工具提示可见并居中 的相关文章

随机推荐

  • 为什么 Visual Studio 2010 中的架构比较显示差异,而实际上没有差异?

    我本来希望Visual Studio 2010能够对Schema Comparison功能带来一些改进 我怀疑有一些 但我无法让一些基本的工作发挥作用 我从 SQL Server 2005 数据库中获取了一个架构 然后为了确保一切正常 我进
  • 将 android-maps-utils 与 ADT 结合使用

    我正在尝试在 Android 项目中使用这个库 1 并全新安装 ADT 我只是不知道该怎么办 该库似乎使用了一些 VCS 和名为 gradle 的东西 看起来是一个构建工具 有人可以告诉我使用全新安装的 ADT 将该库集成到自己的 Andr
  • 可执行 jar 中 Class.getResource() 和 ClassLoader.getResource() 的奇怪行为

    我的理解是从Class getResource 和 ClassLoader getResource 有什么区别 从自己的代码来看 getClass getResource path image png 与 getClass getClass
  • 使用 xml 映射的 Hibernate 派生属性

    我有一个Detectable类与Revisionsset 它们是 Hibernate 管理的 POJO 我还使用映射我的实体hbm xml文件 当用户转到Detectable管理屏幕 我想让他看到Detectable将数据存入表中 该表还包
  • 有没有办法在设置消费者时定义Azure服务总线规则/过滤器?

    在多租户系统中引入 Azure 服务总线和 MassTransit 时 我正在探索我的选择 基本上 该系统由多项服务组成 其中一些是特定于租户的 而另一些则是共享的 服务在内部保存数据 租户数据是隔离的 每个租户都运行相同的服务集 只是他们
  • 在 SCSS 中循环两个 @each 列表

    在我的 CSS 中 我必须创建引用 头发颜色 和 发型 的类 我写了一个 mixin 来帮助我的 CSS 编写更加高效 mixin hair hair colour hair colour hair background image url
  • CSS 中是否可以定位“无目标”?

    是否有 不存在片段标识符 的 CSS 选择器 相反的是 target 问题是 我正在制作一个文档 其中不同部分是可见的 具体取决于您提供的片段标识符 将其视为精灵文件 仅适用于 HTML 所以看起来像这样 section The first
  • EXCEL VBA 时间值格式(hh:mm am/pm)

    如何设置不带秒的 12 小时制时间值的格式 例如 上午 下午时 分 现在我正在使用Format TimeValue Now hh mm 但它不会显示上午 下午 提前致谢 更改格式字符串以包含以下指示符AM PM 基于VBA 格式函数文档 看
  • 如何在水平条上显示值

    我生成了一个条形图 如何在每个条形上显示条形的值 当前情节 我想要得到什么 My code import os import numpy as np import matplotlib pyplot as plt x u INFO u CU
  • 如何通过 Spring Security 和 LDAP 使用“记住我”身份验证?

    我想使用 Spring Security 的 记住我 和 LDAP 身份验证 LDAP认证配置说明here 我刚刚做了一些微小的改变 您能向我解释一下如何在该配置中添加 记住我 吗 或者 也许您可 以给我一个描述如何操作的示例 谢谢 您实际
  • LINQ to Entities 选择多对多关系中的所有条目

    我有 3 个 MySql 表 Students Classes and StudentsInClasses 实体框架将它们转换为两个实体Student and Class 每个都通过多对多导航属性链接到另一个 例如Student Class
  • 提取两个双引号之间的所有数据

    我正在尝试使用 powershell 正则表达式从 AssemblyInfo cs 文件中提取版本数据 下面的正则表达式是我最好的尝试 但它只能拉动字符串 assembly AssemblyVersion 我已经将这个正则表达式放入几个网络
  • 詹金斯的空手道选项

    我正在尝试运行来自詹金斯的代码 在目标和选项中给出特定标签 但它失败并出现以下错误 您能否验证语法并让我知道如何解决此问题 无法在项目 karate boilerplate 上执行目标 org apache maven plugins ma
  • 使用 Pcap 进行超时监听

    我想在 Linux 上使用 C 语言的 Libpcap 编写一个小应用程序 目前 它开始嗅探并等待数据包 但这并不是我真正需要的 我希望它等待 N 秒然后停止监听 我怎样才能做到这一点 这是我的代码 void got packet u ch
  • 如何按常见项目对元组进行分组并查找每组的平均值

    我有一个名为的元组列表data data A 2 B 2 B 4 B 6 B 8 B 6 B 4 B 3 C 10 C 10 C 10 D 12 E 12 F 10 F 8 F 6 average 我想要每个相同字母的平均值 预期输出 av
  • 线程之间的 Qt 连接类型:为什么会这样?

    在尝试使多摄像头系统与处理不同摄像头的不同线程一起工作时 我无法使信号和插槽在不同线程之间正常工作 我知道发送信号的对象和相关槽的对象位于不同的线程中 因此我知道我可能只需要为连接找到合适的 连接类型 参数 最终 我发现只有使用 Qt Di
  • 单独元素的边距如何影响固定元素的位置?

    我有两个独立的DIVs one position fixed用于通知栏 一个用于主容器 当我给出container some margin top 这也推送了我的通知栏 这是一个小提琴 http jsfiddle net Zh9k8 2 而
  • 将 OpenStreetMaps 与 Cordova 集成

    我想知道你们是否知道如何将开放街道地图 OSM 与科尔多瓦一起使用 这几天都在找 我能得出的结论是 我不应该直接使用 OSM 的 API 因为如果我有太多调用 他们的服务器会阻止我 所以有免费的开源名称 例如 1 Openlayers 2
  • Android 4.4.2 仅在完整的 Java 代码动画期间在视图对象边界外部创建黑色遮罩

    在这方面确实需要一些帮助 请看一下这个简单的 ImageView 淡入动画 使用完整的 java 代码 使用 API 21 18 17 16 重新创建它 效果非常好 现在尝试使用 API 19 android 4 4 2 创建有趣的掩码 参
  • Highcharts 仪表使工具提示可见并居中

    当屏幕大小调整时 我无法让 Highcharts 仪表的牙尖出现并保持可见并在仪表内居中 在我的小提琴中 您可以看到工具提示出现 然后在一小段时间后消失 此外 当调整窗口大小时 它不会保留在仪表的中心 任何帮助表示赞赏 我的JSFIDDLE