javascript - Highcharts 覆盖多个日期时间系列

标签 javascript jquery json highcharts

我想覆盖两个日期时间 x 轴,它们不是来自同一日期范围,但具有相同的点数(系列 1 中的点索引 x 应该位于系列 2 中的点索引 x 旁边)。

我试图用两个 x 轴来实现这一点,其中一个被隐藏。

我基本上似乎可以工作,但条形图仅在某些缩放级别上对齐。

放大:

enter image description here

缩小:

enter image description here

Here是一个带有我尝试过的设置的jsfiddle:

"xAxis": [{
  tickInterval: 36e5,
  "type": "datetime",
  "dateTimeLabelFormats": {
    "day": "%H"
  },
  visible: false
}, {
  tickInterval: 36e5,
  "type": "datetime",
  "dateTimeLabelFormats": {
    "day": "%H"

  },
}

最佳答案

我认为你想使用类别 - 这样你就会得到均匀分布的点轴,看看:http://jsfiddle.net/8wahvryx/2/

"xAxis": [{
  "type": "category",
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%H:%M', this.value);
    }
  }
}, {
  "type": "category",
  visible: false
}]

如果您不想更改数据格式,可以覆盖数组中的键(默认为 [x, y])以支持名称:

plotOptions: {
    column: {
    keys: ['name', 'y']
  }
},

注意:在分类轴中,point.name用作点下方的类别名称。使用 xAxis.labels.formatterxAxis.labels.format 将时间戳更改为小时。

关于javascript - Highcharts 覆盖多个日期时间系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34935026/

相关文章:

javascript - 如何根据 localStorage 值使用 ngFor 将 ngClass 添加到 span

javascript - 在输入元素中监听多个事件(React Js)

javascript - jquery中如何将数组json数据转换为特定的json?

json - breezejs - 无模式的复杂属性

javascript - Web SQL DROP/DELETE 表不工作

javascript - 图像加载:JavaScript onLoad 和 Image::complete (FireFox 3)

javascript - VueJS父鼠标悬停事件屏蔽子鼠标悬停事件

javascript - 使用 jQuery 创建悬停和单击功能的精益方法到 SVG 目录映射

javascript - jquery动态按钮点击不工作

Python如何迭代嵌套json中的所有键和值以放入csv文件中