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"]
      }
    }
  }
}

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

2 个答案: