Highchart在x轴上显示字符串

时间:2017-04-28 14:52:34

标签: javascript highcharts

我试图将x轴值显示为系列高位图上的字符串,而是获取(0,1,2 ....)这是xaxis数组索引位置。如何在higcharts上显示格式化为字符串的xaxis值?

这就是我所拥有的

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
                "labels": {
                "formatter": function() {
                        console.log(this);
                        console.log(this.value.toString());
                    return this.value
                }                    
            },
  },
  series: [{
    data: [
      ['Jan-1', 100],
      ['Jan-2', 120],
      ['Jan-3', 130]
    ]
  }]
});

希望看到1月1日' 1月2日'作为x轴上的标签。以下是https://jsfiddle.net/dLfv2sbd/2/

下方小提琴的链接

2 个答案:

答案 0 :(得分:3)

删除labels并使用type: 'category'代替type: 'datetime'

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'category',
  },
  series: [{
    data: [
      ['Jan-1', 100],
      ['Jan-2', 120],
      ['Jan-3', 130]
    ]
  }]
});

检查fiddle

答案 1 :(得分:1)

你仍然可以这样使用日期时间。

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
                "labels": {
                "formatter": function() {
                    return Highcharts.dateFormat('%b-%e', this.value)
                }                    
            },
  },
  series: [{
    data: [
      [Date.UTC(2017,0,1), 100],
      [Date.UTC(2017,0,2), 120],
      [Date.UTC(2017,0,3), 130]
    ]
  }]
});

https://jsfiddle.net/dLfv2sbd/4/