如何设置 highcharts 中 x 轴标签的格式

2024-02-15

I have the following highchart output: enter image description here

我只想在 x 轴标签中看到 Feb-10,而不是 Feb-10 18:00。因此所有 xaxis 标签都将类似于 Feb-10、Feb-12 等。但工具提示将与输出屏幕相同。如何格式化 xaxis 以便获得 Feb-10、Feb-12 等,而不是 Feb-10 18:00、Feb-12 20:00 等。

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            spacingRight: 20
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            },
            startOnTick: true,
            showFirstLabel: true,
            endOnTick: true,
            showLastLabel: true,
            categories: dateAndTimeArray,
            tickInterval: 10,
            labels: {
                rotation: 0.1,
                align: 'left',
                step: 10,
                enabled: true
            },
            style: {
                fontSize: '8px'
            }
        },
        yAxis: {
            title: {
                text: 'Measurement value'
            }
        },
        tooltip: {
            xDateFormat: '%Y-%m-%d %H:%M',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                //  threshold: null
            }
        },
        series: [{
            type: 'line',
            name: 'Value',
            data: chartData,
            marker: {
                enabled: false
            }
        }]
    });
});

酷,试试这个:

将此格式化程序添加到您的xAxis labels object:

xAxis {
    ...
    labels: {
        ...
        formatter: function() {
            return this.value.toString().substring(0, 6);
        },
    }
}

Link: http://jsfiddle.net/tn6Kw/9/ http://jsfiddle.net/tn6Kw/9/

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

如何设置 highcharts 中 x 轴标签的格式 的相关文章

  • 数据按用户分组为每周、每月

    我有一个高库存折线图 显示给定股票的每日和每周股价 问题是 当数据数组足够大时 每日数据点将被 采样 为每周数据点 而每周数据点将被采样为每月数据点 有什么方法可以根据需要将用户设置为每周或每月 提前致谢 检查一下数据分组 http www
  • 时间:2019-03-17 标签:c#datetimeformat

    我希望根据当前的文化为我的日期时间设置特定的格式 所以我尝试这个 dateTime ToString dd MM yyyy hh mm 这部分是可以的 被特定于区域性的分隔符替换 但日和月的顺序不会根据文化而改变 如 MM dd Using
  • 如何以良好的格式结果格式化 python 列表

    我有很多列表 如下所示 通过打印data并将其与字符串连接起来check str如下最后一条语句所示 需要帮助以在字符串连接后更好地格式化列表值 如预期所示 print data printing lists in this variabl
  • HighChart:多个图表的绘图线单击事件

    我正在使用 highchart 来实现一些向下钻取功能 我有一个功能可以让用户单击面积图并添加一条线 但后来我发现我的函数有一个错误 这些图表之间应该只有一条红线 但是当用户单击另一个图表时 第一个图表上的现有红线不会被删除 以下是我分享的
  • 使用 highcharts 将 mysql 数据库中的动态数据添加到折线图

    我想使用 ajax 或 json 将数据点添加到我的折线图中 现在我必须重新加载整个网页才能在图表上显示我的新数据 但我想通过添加如下链接的点来显示实时数据 jsfiddle net gh get jquery 1 9 1 highslid
  • Highstocks 图表宽度未正确呈现

    您好 我在使用 jquery 选项卡时遇到 highstocks 问题 这是构造函数的代码 Chart new Highcharts StockChart Chart new Highcharts StockChart chart rend
  • Highcharts 使用格式化程序更改工具提示日期时间

    我有一个如下图所示的图表 默认情况下 每个工具提示值都位于其自己的工具提示 气泡 中 日期时间位于 Y 轴底部 悬停在 X 标签顶部 问题在于 更改日期时间的格式以匹配区域设置对于 Highcharts 来说不是动态的 我知道我可以让用户更
  • 渲染图表后,从图表对象更改 Highcharts 工具提示格式化程序

    我发现我可以使用 setData 更改系列 并且我知道我可以使用 setExtremes 修改最大值 但我无法弄清楚如何从图表对象设置工具提示格式化程序 我如何更新该字段 如果我有一个图表对象 如何更新其工具提示格式化程序属性 以及plot
  • highcharts 弄错了我的时间

    highcharts 弄错了我的时间 我来自委内瑞拉 以防万一 我正在做一个实时系统 我可以在数据库中获取时间 秒和毫秒 例如 10 39 09 2 我应用 strtotime time 然后通过 json 发送到图表 在我的高图表中 我进
  • 解决 emacs 错误的想法:“应用:生成子进程:exec 格式错误”

    我正在尝试将 rdebug 与 emacs 和 cygwin 一起使用 但遇到了麻烦 每当我执行 M x rdebug 并为其提供适当的脚本来运行时 它都会因错误而停止 apply Spawning child process exec f
  • python string format() 与带有整数键的字典[重复]

    这个问题在这里已经有答案了 我想使用Python字符串format 充当快速而肮脏的模板 但是 那dict我想使用的键是整数 字符串表示形式 一个简化的例子如下 s hello there 5 d 5 you s format d 上面的代
  • 如何使用 JavaScript 动态更改 Highcharts 中的数据点

    我正在尝试改变现有系列中的一个点 通过查看 API 我一直在尝试以下操作 chart series 0 data 0 y 43 chart redraw 我确信我错过了一些简单的东西 但我无法弄清楚 感谢您的帮助 您不能只设置该值 Char
  • Android 数字格式不知为何是错误的,我得到的不是 3.5,而是 3.499999999,为什么?

    我将一些数据存储在数据库中 然后使用游标读取这些数据 所有数据均为 56 45 3 04 0 03 类型 即小数点后两位 现在我想对它们求和 但这似乎并不容易 我得到这些数字c getDouble 3 然后我将它添加到 sum 变量中 如下
  • Android 软键盘先显示数字视图

    我的应用程序上有一个登录屏幕 它接受 CPF 作为登录名 CPF 是每个巴西公民都有的唯一号码标识 例如 10546819546 但它也可以接受护照号码作为登录名 并且上面可能有字母 我的问题是我希望键盘在弹出时在默认字母表之前显示数字 符
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • 在高图表中突出显示一系列条形图中的一个条形图?

    我有一个图表 显示堆叠和分组的条形图 类似于这个演示 http www highcharts com demo column stacked and grouped 有没有办法从 JavaScript 代码中使系列之一中的其中一个栏突出显示
  • 在react-highcharts中动态更改系列数据,无需重新渲染图表

    I have created a line chart using react highcharts It has 3 series and different data for each of them And I have a rang
  • matplotlib 后端对渲染格式有什么限制?

    我对 matplotlib 使用的后端在确定可以呈现哪些格式方面所扮演的角色感到困惑 例如 文件说 http matplotlib org faq usage faq html what is a backend agg 后端生成 PNG
  • 在 SQLite 数据库中存储日期时间值的最佳方式(Delphi)

    我将把日期时间值存储在 SQLite 数据库中 使用 Delphi 和 DISqlite 库 数据库的本质是它永远不需要在计算机或系统之间传输 因此互操作性不是一个限制 相反 我的重点是阅读速度 日期时间字段将被索引 我将对其进行大量搜索
  • 如何将动态格式字符串与格式一起使用!宏?

    我想使用format 宏与String作为第一个参数 但因为宏需要字符串文字 所以我无法传递任何与它不同的内容 我想这样做是为了将字符串动态添加到当前字符串中 以便在视图引擎中使用 如果有更好的方法 我愿意接受建议 let test Str

随机推荐

  • Golang编写的UDP客户端无法接收来自服务器的消息

    我写了一个Java客户端 它向广播地址发送消息 我还编写了一个Java服务器 它接受所有发送的消息并将消息发送回客户端 现在我想尝试在 Go 中做同样的事情 只是为了获得一些经验 服务器工作正常 正在接收消息并对 Java 客户端做出响应
  • 删除数组中的所有值,同时保持键不变

    我真的必须这样做才能重置阵列吗 foreach array as i gt value unset array i EDIT 这个更有意义 因为前一个相当于 array array foreach array as i gt value a
  • ARC 并释放方法中创建的对象

    我偶然发现了一个在其他地方找不到答案的问题 当我调用一个返回指向稍后使用的对象的指针并最终设置为 nil 的方法时 它仍然分配在内存中 根据 Instruments 我正在使用 XCode 4 6 3 和 iOS 6 1 ARC 已打开 这
  • OpenCv中如何将Mat的一行复制到另一个Mat的列?

    我有两个垫子 A size 1 640 B size 640 480 我想将 A 复制到 B 的第一列 所以我使用A copyTo B col 0 但是这失败了 怎么做 你走在正确的轨道上 Mat col是要使用的匹配工具 但要注意 简单地
  • appjs - 编译成单个可执行文件?

    我花了整晚的时间尝试不同的工具来通过 html5 构建跨平台桌面应用程序 到目前为止 appjs 似乎很完美 我只玩过基于 Windows 可执行文件的演示项目 但我想知道是否有任何指南或教程介绍如何将项目转换为跨平台可执行文件 单个文件
  • 将小端文件转换为大端文件

    如何将小端二进制文件转换为大端二进制文件 我有一个用 C 编写的二进制文件 我正在使用 Java 中的 DataInputStream 读取这个文件 该文件以大端格式读取 我还查看了 ByteBuffer 类 但不知道如何使用它来获得我想要
  • 带有 Eclipse 和 WTP 插件的 Maven webapp 在 Tomcat 中以奇怪的方式部署文件

    我将 Eclipse J2EE 3 5 与 Maven 和 tomcat 结合使用 为了使用 WTP 部署我的 Maven Web 应用程序 我添加了动态 Web 模块方面并更改了项目的 org eclipse wst common com
  • 具有均匀大小内核的图像卷积

    我想执行简单的 2D 图像卷积 但我的内核大小均匀 我应该为我的内核中心选择哪些指数 我尝试在谷歌上搜索答案并查看现有代码 人们通常将其内核居中 这样在新的 0 之前就会多一个样本 因此 如果我们有一个 4x4 内核 则居中索引应该是 2
  • Android 自动翻译工具 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 你知道有没有free自动本地化工具目前已退出市场 这将是从我的 android 项目翻译我的 XML
  • 如何使用 laravel 在 DOMPDF 中显示印地语字体?

    这是larval中的pdfblade文件 它给 在pdf文件中标记 section css
  • Django 查询超过 5 小时的对象的日期时间

    我正在尝试为 5 小时以上的小部件编写 Django 查询 但我有点迷失了 小部件模型有一个DateTimeField其中填充了小部件的创建时间 If Widget是模型的名称 它有一个名为的 DateTimeField 属性created
  • 如何区分 UIButton 回调操作的触发事件

    在为 UIButton 定义回调时 我列出了同一操作的多个事件 在目标中我希望能够区分触发回调的事件 button addTarget self action selector callback forControlEvents UICon
  • Android:从 SD 卡加载位图时出现“java-lang-outofmemoryerror-bitmap-size-exceeds-vm-budget-android”?

    在我的应用程序中 我必须使用 500x500 像素的小图像显示大约 10000 x 5000 的图像 即通过平铺图像 为了将所有图像平铺为一张 我首先从 SD 卡收集所有位图 以便在画布上绘制 但是当我使用外部存储加载图像时BitmapFa
  • Jquery:TableSorter-特定格式的日期不起作用

    我在用表格分类器 http tablesorter com docs 对表格进行排序的插件 第四列是日期字段 格式为 gt 2013 年 1 月 30 日 gt 2013 年 2 月 1 日 当我尝试对格式进行排序时 它给出了错误的排序 我
  • 在C#中执行Quser windows命令;将结果返回到字符串

    我试图通过 C 执行 Quser windows 命令来返回谁登录到服务器的详细信息 但无法让它工作 我尝试过使用一些指南 但我还没有看到任何适合这种情况的指南 此时命令返回以下内容 Microsoft Windows 版本 6 1 760
  • 42、42.0、“42.0”、“42”之间有什么区别吗

    在使用 Smart Match 测试我的 Perl 代码的过程中 我遇到了这个问题 42 42 0 42 0 42 之间有什么区别吗 var1 42 var2 42 0 a var1 var2 我正进入 状态 a为 0 意思是 var1 a
  • 替换 LinearLayout 权重机制

    背景 出于性能考虑 Google 建议避免使用嵌套加权线性布局 使用嵌套加权线性布局的读 写和维护都很糟糕 仍然没有好的替代方案来放置可用大小的 的视图 唯一的解决方案是权重和使用 OpenGL 甚至没有像 WPF Silverlight
  • 使用复制构造函数后双重释放子对象

    我无法弄清楚为什么 看起来 一个对象被破坏了两次 如果我创建一个类 B 的对象 其中包含另一个类 A 的对象 并且我复制该对象 复制的对象被破坏两次 虽然看起来是这样的 我无法弄清楚这个输出 我创建了以下 最小 示例 这似乎触发了我的问题
  • jQuery-UI 可拖动和可排序

    所以我一直在研究这个例子 http jqueryui com demos draggable sortable http jqueryui com demos draggable sortable我已经在我的产品上实现了这一点 然而我想做两
  • 如何设置 highcharts 中 x 轴标签的格式

    I have the following highchart output 我只想在 x 轴标签中看到 Feb 10 而不是 Feb 10 18 00 因此所有 xaxis 标签都将类似于 Feb 10 Feb 12 等 但工具提示将与输出