如何修改Highstock x轴体？

Question

这里我想展示7天和30天的数据，出了一些问题：

1.引用：highstock.js，图像显示了英文
2.我想自定义X轴的显示内容，但是无法修改？x轴体只能显示时间吗？如何更改？

$(function () {
    // create the chart
    Highcharts.stockChart('containers', {
        credits:{
            enabled: false
        },
        xAxis: {
        categories: ['test']   //这里设置X轴根本不生效
        },
        chart: {
            alignTicks: false
        },
        rangeSelector: {
            inputEnabled:false,
            buttons: [{
                type: 'day',
                count: 7,
                text: '7天'
            }, {
                type: 'day',
                count: 30,
                text: '30天'
            },],
            selected: 1
        },
        scrollbar : {
            enabled : false
        },
        navigator : {
            enabled : false
        },
        title: {
            text: 'AAPL Stock Volume'
        },
        series: [{
            type: 'column',
            name: 'AAPL Stock Volume',
            data: [11111,22222,33333],
        }]
    });
});

Answer 1

更新了例子,你看看

说明

首先这个data应该是一个二维数组,里面的数组的第一位是时间,第二位是 y 轴的数值

data = [
  [1167609600000, 1111],
  [1167696000000, 22222],
  [1167782400000, 33333],
  [1167868800000, 44444],
  [1167955200000, 55555],
]

然后这个 x 轴是动态的,会根据你选择的范围,来确定显示的值.你可以在xAxis.dateTimeLabelFormats上定义对应的单位

dateTimeLabelFormats具体可以看文档,链接在最后的参考

xAxis: {
  type: 'datetime',
  dateTimeLabelFormats: {
    second: '%Y-%m-%d<br/>%H:%M:%S',
    minute: '%Y-%m-%d<br/>%H:%M',
    hour: '%Y-%m-%d<br/>%H:%M',
    day: '%Y<br/>%m--%d',
    week: '%Y<br/>%m-%d',
    month: '%Y-%m',
    year: '%Y',
  },
}

比如我的例子里数据只有5条,会显示到day单位,我定义day:%Y年%m月%d天这样就 x 轴输出就会根据data里面每项的第一个数值根据定义转换输出.

参考

• Highcharts Sample
• dateTimeLabelFormats