HighCharts:水平条形图的对数刻度

2023-12-01

我正在与高图表生成条形图。我的值范围可以从最小 0 到最大 100k(示例)。因此,图表中的一个条可能非常小,而另一个则可能非常长。 HighCharts 引入了“对数缩放”功能。可以看到其中的例子HERE

我的js代码是这样写的jsfiddle文件。我想以对数方式显示水平轴(x 轴)。我已插入钥匙type如示例所示,但脚本进入无限循环,必须停止。

执行中存在什么缺陷,或者 HighCharts 的对数缩放仍然不成熟?

P.Sjsfiddle 中的注释行导致了问题


由于“官方”方法仍然存在缺陷,因此您可以通过使用以 10 为基数的对数操作输入数据并屏蔽输出数据将 10 提高到输出值来更手动地实现对数标度。在这里查看它的实际效果http://jsfiddle.net/7J6sc/代码如下。

function log10(n) {
 return Math.log(n)/Math.log(10);   
}

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: [''],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        },
        labels: {
            formatter: function() {
             return Math.round(Math.pow(10,this.value));
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                   return Math.round(Math.pow(10,this.y)); 
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [log10(4396)],
        "name": "A"},
    {
        "data": [log10(4940)],
        "name": "B"},
    {
        "data": [log10(4440)],
        "name": "C"},
    {
        "data": [log10(2700)],
        "name": "D"},
    {
        "data": [log10(2400)],
        "name": "E"},
    {
        "data": [log10(6000)],
        "name": "F"},
    {
        "data": [log10(3000)],
        "name": "G"},
    {
        "data": [log10(15000)],
        "name": "E"}],

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

HighCharts:水平条形图的对数刻度 的相关文章

  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 如何在没有 jQuery 的情况下删除 Javascript 中的元素

    我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中 我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7

随机推荐

  • Visual Studio Express 抱怨缺少“;”输入c程序后

    我的代码有什么问题 include
  • 计算本周星期一的日期

    目标 如果当前星期几是星期一以外的任何一天 则显示本周星期一的日期 如果本周的当天是星期一 则只需显示今天的日期 这是我写的 我认为它有效 但可能不是确定日期的最干净的方法 话虽如此 有没有人看到代码错误或不起作用的任何原因
  • 如何添加尚未在plugins.cordova.io上注册的cordova插件?

    喜欢这些插件 https github com ArchieGoodwin SilentShot https github com alongubkin phonertc 他们没有 tarball 网址 cordova plugin add
  • 如何将 Unity 与内部类一起使用?

    我有一个 Web API 应用程序 并使用 Unity 进行依赖项注入 该应用程序使用包含接口 IDoStuff 和实现该接口的类的库 internal interface IDoStuff void DoSomething interna
  • 将txt的特定行放入数组中

    我正在为我的 C 课程制作一个 谁想成为百万富翁 游戏 我有 15 篇文章 每篇有 3 个问题 答案 例子 Whats the capital of Brasil Rio de Janeiro Brasilia Sao Paulo Curi
  • 评估转义字符串

    我的文件中有一些已经转义的字符串 所以文件的内容如下所示 Hello nWorld This is tGreat 当我阅读该文件时 我得到 n作为两个不同的角色而不是一个 如何将转义字符串转换为非转义字符串 基于 deAtog的代码 我做了
  • 设置单元格 (n) 颜色索引等于单元格 (n - 1) 颜色索引

    我从这个宏中得到了一个奇怪的输出 宏应该使用上面的颜色填充空白单元格 创建一个颜色块 结果不是我所期望的 尽管Debug Print显示相同ColorIndex number 知道这里发生了什么吗 Option Explicit Sub C
  • 如何从 BigQuery 中的 Openstreet 地图数据集中提取所有国家/地区几何图形

    我正在使用此查询使用 OSM 提取所有国家 地区的几何形状 它工作正常 但我确信 它正在创建重复项 因为我使用国旗作为参考 有些地方有国旗 但它们并不是真正的国家 地区 SELECT feature type osm id osm time
  • 从 Eclipse 中使用自定义 Firefox 配置文件启动 Selenium

    我正在 Eclipse 中运行 Selenium 测试 但无法加载自定义 Firefox 配置文件 大多数消息来源建议我需要像这样启动 Selenium 服务器 java jar selenium server jar firefoxPro
  • 使用 Entity Framework 4 在运行时打开 SQL CE 文件

    我正在开始使用 Entity Framework 4 并创建一个演示应用程序作为学习练习 该应用程序是一个简单的文档生成器 它使用 SQL CE 存储 每个文档项目都有自己的 SQL CE 数据文件 用户打开这些文件之一来处理项目 EDM
  • 正确的用户输入 - x86 Linux 汇编

    所以我正在使用 NASM 为 Linux 开发一个 x86 汇编程序 该程序主要询问用户的姓名和最喜欢的颜色 执行此操作并将两个字符串存储在 bss 部分中声明的变量中后 程序会打印 No way用户名 最喜欢的颜色也是我最喜欢的颜色 我遇
  • 如何使用Python计算目录中的文件数量

    我如何只计算files在目录中 这将目录本身算作一个文件 len glob glob os listdir 会比使用稍微更有效glob glob 要测试文件名是否是普通文件 而不是目录或其他实体 请使用os path isfile impo
  • 在单独的页面中打印 Javascript? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我目前正在使用 PHP 并获取完整的用户详细信息并将其显示到 html 表中 我遇到的问题是 当我打印 3 个表格时 每个表格都完美地打印在每页上
  • 为什么在更改 main 的签名时会出现段错误?

    我试图涉足 C 语言 并编写了这个程序 在随机位置显示我的 RAM 的 kb 这是代码 并且运行良好 include
  • 哪个 DLL 具有 Windows.Devices.Gelocation 命名空间?

    我正在使用 VS 2012 我需要编写使用 Windows Devices Gelocation 命名空间中的类的代码 我下载了示例程序 但它无法在 VS2012 中加载 因为它需要 VS 2013 并且该类的文档没有指示该命名空间位于哪个
  • Android 有准确的重复闹钟系统吗?

    背景 I m currently developing an application for Android which revolves around an alarm that goes of on an user specified
  • 静脉中的行人模拟 (omnet++/sumo)

    我正在尝试在 omnet 中运行相扑行人模拟 为了保持简单 我是初学者 我决定使用Erlangen示例提供了静脉并用几个行人扩展它 我添加了相扑中的行人并运行它 它工作得很好 你可以看到这张照片中的行人和汽车 接下来我尝试在 omnet 中
  • opencv 将图像与文本二值化

    我需要用文本对图像进行二值化 它工作得很好 但在某些情况下输出是空的 白色图像 code Compile g txtbin cpp o txtbin pkg config opencv cflags libs Run txtbin inpu
  • 如何检查PCF版本

    有没有办法知道哪个Pivotal Cloud Foundry我们正在使用的许可版本 我看到公共 PCF 中免费提供一些市场服务 但在我们使用的许可 PCF 版本中不提供这些服务 我假设版本不匹配可能是原因 作为一个正常人cf对于 Pivot
  • HighCharts:水平条形图的对数刻度

    我正在与高图表生成条形图 我的值范围可以从最小 0 到最大 100k 示例 因此 图表中的一个条可能非常小 而另一个则可能非常长 HighCharts 引入了 对数缩放 功能 可以看到其中的例子HERE 我的js代码是这样写的jsfiddl