Highcharts - yAxis 最大数据刻度间隔

2023-12-13

我正在尝试动态设置最大数字的最大值。我不确定我哪里做错了......

有什么帮助吗?

在线演示

预期的:

enter image description here

我得到什么:

enter image description here

PS:我想找到最大值(例如:本例中为 100)并表明第一个 yAxisLabel 和下一个值应为负 (-) 20 等...

图1 数值[39, 35, 19, 38, 39, 48, 56, 57]

图2 数值[39, 35, 19, 38, 39, 48, 56, 57]

尝试过没有运气的选项:

yAxis: {
  min: 0, 
  max: 100,
  tickInterval: 20,
},

and

yAxis: {
  tickInterval: 20,
  tickPositioner: function(min,max){
      var act = min,
          ticks = [];
      console.log(this);
      while(act <= max){
        ticks.push(act);
        act+= this.tickInterval;
      }
      return ticks;  
  },
  min: 0,
  max: 100,
},

Thanks to @Kacper Madej who has given below code which resulted enter image description here


可以使用tockPositioner并在那里设置刻度线,例如:

    showLastLabel: false,
    tickPositioner: function(min, max) {
      var ticks = [],
        tick = min,
        step = Math.round((max - min) / 7);

      while (tick < max - step / 2) {
        ticks.push(Math.round(tick));
        tick += step;
      }
      ticks.push(Math.round(max));
      ticks.push(Math.round(max+step)); //hidden - added for top padding

      return ticks;
    }

例子:http://jsfiddle.net/e6har510/

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

Highcharts - yAxis 最大数据刻度间隔 的相关文章

  • 禁用 HighCharts 上的悬停

    我使用 HighCharts 库构建了一个饼图 这是我的图表 http jsfiddle net t2MxW 20890 var chart new Highcharts Chart colors 0072BC BFDAFF DDDF00
  • 自定义 highcharts 工具提示以显示日期时间

    我正在开发一个项目 预计会显示此图 http jsfiddle net Kc23N http jsfiddle net Kc23N 当我单击一个点 工具提示 时 我想显示一个可以理解的日期 而不是以毫秒为单位的值 我认为需要更改这段代码 t
  • 如何在 R 中设置 highchart 全局选项

    我在 javascript 中看到了很多示例 但我找不到在 R 中执行此操作的示例 这是 API 链接 http api highcharts com highcharts global http api highcharts com hi
  • Highcharts Marimekko 图表刷新

    下面的脚本构建了一个基本的 Marimekko 图表 其中 x 值是累积的 作为一种令人兴奋的绘制数据的方式 这是非常棒的 http jsfiddle net Guill84 1o926coh http jsfiddle net Guill
  • Highcharts 在导出时添加图像

    我使用具有导出功能的 Highcharts 根据我的理解 将图像添加到图表中 我可以使用渲染器 该渲染器工作正常 但我不希望图像 徽标 出现在应用程序中的图表上 我希望它出现仅在出口时 我该如何做到这一点 你应该使用图表选项 http ap
  • 使用 Highcharts 和 React 创建条形图 - 出现未找到渲染 div 的错误

    我正在尝试在我的 Web 应用程序中使用 Highcharts 创建条形图 该应用程序在前端使用 React 下面是我的仪表板 tsx 文件的片段 我基本上只是从 JSFiddle 复制并粘贴了代码 http jsfiddle net 8q
  • Highcharts - 触发 legendItemClick 事件

    我想触发与当您选择项目图例但从外部 html 按钮时触发的事件相同的事件 是否可以 我创建了一个 jsfiddle 来展示它 http jsfiddle net YcJF8 1 http jsfiddle net YcJF8 1 conta
  • 创建超过 2 组的高图表密度

    我尝试用两个以上的组创建高图表密度 我找到了一种手动将它们逐一添加的方法 但必须有更好的方法来处理组 示例 我想创建一个类似于下面的ggplot图表的highchart 而不需要将它们一一添加 有什么办法可以做到吗 d f lt data
  • highchart情节可以有移动动画吗?

    有没有什么方法可以让情节线通过动画移动到新位置 或者我必须使用其他插件吗 我想构建像二元期权或专家期权游戏一样的乐趣 这是我的简单演示 示例演示链接 http jsfiddle net krdh2e73 function Highchart
  • 在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
  • Highcharts 问题 - 在可缩放图表中显示标签

    我有一个缩放柱形图 xAxis 中有 200 多个类别 因此 当它处于初始状态 比例1 1 时 所有这些家伙都显示在X轴下方 即使我将它们垂直放置 也无法读取任何内容 我需要缩放图表以使标签可见 Here s screenshot of t
  • 如何纠正 Highcharts 中的鼠标事件

    我正在尝试绘制 xy 线 其中 y 轴反转 并且我得到了图 但是mouse event我无法纠正它 它显示反向事件 我想自动找到轴的最小值和混合 如何做到这一点 以及如何将 x 轴置于顶部 这是我的代码 JS function var ch
  • Highcharts-more 的替代品

    As per npm https www npmjs com package highcharts morehighcharts more js 已弃用 我们只需要从 highcharts 文件夹中导入相应的模块即可 但是当我尝试删除 hi
  • 如何在使用类型分散时将箭头添加到行尾

    如何在 y 不等于 0 且系列类型以线宽 2 分散的情况下正确地将箭头添加到行的每一端 在这里我可以看到箭头已添加但未正确添加 请看这个 部分工作小提琴 http jsfiddle net vnYCX 这是我的 JS 最初的原型是由 sta
  • 条形图的 Highcharts 背景图像

    我想使用 Highcharts 将背景图像添加到条形图并将其显示在UIWebView 到目前为止 我一直在使用这个小插件 它在最新的 Chrome 中运行良好 但是 一旦我将其加载到 UIWebView 中 图像就不会显示 我认为这与iOS
  • 如何将 JavaScript 图表导出到 Excel 文件 (HighCharts)

    我必须将 Javascript 图表 HighCharts 导出到 Excel 文件中 图表在div中呈现 但excel不呈现javascript生成的html css内容 仅呈现没有样式的文本 一个解决方案是将图表渲染为图像 jpeg 但
  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期?

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐