highstock - 如何在 Highstock 图表中从 24 小时切换到 12 小时时钟？

Question

我正在使用 highstock 制作股票图表。目前，xAxis 数据为日内 24 小时格式。我想以 12 小时格式显示 xAxis 的日内数据。

您能告诉我如何将 Highstock 图表中的 24 小时时间转换为 12 小时时间吗？我尝试使用 dateTimeLabelFormats，但没有运气。

提前致谢。

Answer 1

对我来说 dateTimeLabelFormats 工作得很好，请参阅：http: //jsfiddle.net/wmFZx/

$('#container').highcharts({
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            hour: '%I %p'
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 2 * 3600 * 1000 // two hours
    }]
});

Answer 2

对于像我这样迟到的人（2 年后），试试这个：

tooltip: {
  xDateFormat: "%A, %b %e, %I:%M%p"
},
xAxis: {
  dateTimeLabelFormats : {
    hour: "%I %p"
  }
}

这是 JSFiddle：http: //jsfiddle.net/4tat369x/

如果您有多个系列并共享工具提示，则需要针对您的图表类型修改 dataGrouping dateTimeLabelFormats。这是折线图的样子：

plotOptions: {
  line: {
    dataGrouping: {
      dateTimeLabelFormats: {
        millisecond: ["%A, %b %e, %H:%M:%S.%L%p", "%A, %b %e, %I:%M:%S.%L%p", "-%I:%M:%S.%L%p"],
        second: ["%A, %b %e, %I:%M:%S%p", "%A, %b %e, %I:%M:%S%p", "-%I:%M:%S%p"],
        minute: ["%A, %b %e, %I:%M%p", "%A, %b %e, %I:%M%p", "-%I:%M%p"],
        hour: ["%A, %b %e, %I:%M%p", "%A, %b %e, %I:%M%p", "-%I:%M%p"],
        day: ["%A, %b %e, %Y", "%A, %b %e", "-%A, %b %e, %Y"],
        week: ["Week from %A, %b %e, %Y", "%A, %b %e", "-%A, %b %e, %Y"],
        month: ["%B %Y", "%B", "-%B %Y"],
        year: ["%Y", "%Y", "-%Y"]
      }
    }
  }
}