【问题标题】:Highchart show string on x-axisHighchart 在 x 轴上显示字符串
【发布时间】:2017-04-28 14:52:33
【问题描述】:

我试图将我的 x 轴值显示为系列的 highcharts 上的字符串,但得到 (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]
    ]
  }]
});

希望将“Jan-1”、“Jan-2”作为 x 轴上的标签。这是https://jsfiddle.net/dLfv2sbd/2/下方小提琴的链接

【问题讨论】:

    标签: javascript highcharts


    【解决方案1】:

    删除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

    【讨论】:

    • 谢谢,这就是我要找的东西
    【解决方案2】:

    您仍然可以通过这种方式使用日期时间。

    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/

    【讨论】:

    • 有意思,我去看看
    猜你喜欢
    • 1970-01-01
    • 2015-10-24
    • 2016-01-08
    • 1970-01-01
    • 1970-01-01
    • 2016-08-09
    • 2023-04-05
    • 1970-01-01
    • 2019-11-24
    相关资源
    最近更新 更多