Javascript Highcharts-DateTimeLabelFormat的自定义格式（第一小时、第二小时…）

我使用的是带面积图的海图

我如何将

xAxis标签

定制为带有后缀的小时标签为

1、2、3等



当前格式：

$(function (n) {

  // Everything in common between the charts
  var commonOptions = {
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      labels: {
        style:{ color: '#000' }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' }
      },
      tickInterval: 100,
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],

    // Area Chart
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  $('#areaChartTwoWay-time').highcharts(Highcharts.merge(commonOptions, {
    chart: { type: 'area' },
    xAxis: {
      title: { text: 'Hours', },
      type: 'datetime',
      min:Date.UTC(2016,04,16,1,0,0,0),
      minRange: 12 * 3600 * 500,
      dateTimeLabelFormats: {
        hour: '%Hth hour',
      },
    },
    yAxis: {
      tickInterval: 30,
      title: { text: 'Total views', },
      offset:0,
    },
    series: [{
      name: 'Unique open',
      lineColor: '#fb8b4b',
      marker: { lineColor: '#fb8b4b', fillColor: 'white', },
      data: [88, 68, 79, 39, 48, 69, 69, 18, 40, 62, 91, 61, 39],
      legendIndex:1,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0), 
    }, {
      name: 'Forwards',
      lineColor: '#99cc03',
      marker: { lineColor: '#99cc03', fillColor: 'white', },
      data: [3, 8, 15, 12, 61, 32, 43, 18, 9, 12, 22, 18, 12],
      legendIndex:0,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0),        
    }]
  }));

  var s=["th","st","nd","rd"],
      v=n%100;
  return n+(s[(v-20)%10]||s[v]||s[0]);

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

01小时、02小时、03小时

必须按以下方式进行更改：

$(function (n) {

  // Everything in common between the charts
  var commonOptions = {
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      labels: {
        style:{ color: '#000' }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' }
      },
      tickInterval: 100,
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],

    // Area Chart
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  $('#areaChartTwoWay-time').highcharts(Highcharts.merge(commonOptions, {
    chart: { type: 'area' },
    xAxis: {
      title: { text: 'Hours', },
      type: 'datetime',
      min:Date.UTC(2016,04,16,1,0,0,0),
      minRange: 12 * 3600 * 500,
      dateTimeLabelFormats: {
        hour: '%Hth hour',
      },
    },
    yAxis: {
      tickInterval: 30,
      title: { text: 'Total views', },
      offset:0,
    },
    series: [{
      name: 'Unique open',
      lineColor: '#fb8b4b',
      marker: { lineColor: '#fb8b4b', fillColor: 'white', },
      data: [88, 68, 79, 39, 48, 69, 69, 18, 40, 62, 91, 61, 39],
      legendIndex:1,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0), 
    }, {
      name: 'Forwards',
      lineColor: '#99cc03',
      marker: { lineColor: '#99cc03', fillColor: 'white', },
      data: [3, 8, 15, 12, 61, 32, 43, 18, 9, 12, 22, 18, 12],
      legendIndex:0,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0),        
    }]
  }));

  var s=["th","st","nd","rd"],
      v=n%100;
  return n+(s[(v-20)%10]||s[v]||s[0]);

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

1小时、2小时、3小时

我曾尝试使用序数方法进行上述转换，但没有成功

可能是顺序脚本放置错误？

var s=["th","st","nd","rd"],
          v=n%100;
      return n+(s[(v-20)%10]||s[v]||s[0]);

完整代码：

$(function (n) {

  // Everything in common between the charts
  var commonOptions = {
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      labels: {
        style:{ color: '#000' }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#000",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' }
      },
      tickInterval: 100,
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],

    // Area Chart
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  $('#areaChartTwoWay-time').highcharts(Highcharts.merge(commonOptions, {
    chart: { type: 'area' },
    xAxis: {
      title: { text: 'Hours', },
      type: 'datetime',
      min:Date.UTC(2016,04,16,1,0,0,0),
      minRange: 12 * 3600 * 500,
      dateTimeLabelFormats: {
        hour: '%Hth hour',
      },
    },
    yAxis: {
      tickInterval: 30,
      title: { text: 'Total views', },
      offset:0,
    },
    series: [{
      name: 'Unique open',
      lineColor: '#fb8b4b',
      marker: { lineColor: '#fb8b4b', fillColor: 'white', },
      data: [88, 68, 79, 39, 48, 69, 69, 18, 40, 62, 91, 61, 39],
      legendIndex:1,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0), 
    }, {
      name: 'Forwards',
      lineColor: '#99cc03',
      marker: { lineColor: '#99cc03', fillColor: 'white', },
      data: [3, 8, 15, 12, 61, 32, 43, 18, 9, 12, 22, 18, 12],
      legendIndex:0,
      pointInterval: 3600 * 500,
      pointStart:Date.UTC(2016,04,16,1,0,0,0),        
    }]
  }));

  var s=["th","st","nd","rd"],
      v=n%100;
  return n+(s[(v-20)%10]||s[v]||s[0]);

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

您可以调用另一个函数来获取序号。一个快速的google发现了这个方法：


函数getOrdinal（n）{
变量s=[“th”、“st”、“nd”、“rd”]，
v=n%100；
返回n+（s[（v-20）%10]| | s[v]| | s[0]）；
}

此外，这个问题可能会有帮助嗨@George Harris，谢谢您的快速回复。。。由于我是这些脚本的新手，我不知道应该使用哪个地方。。。尝试在底部添加，但不起作用。。。你能更新我的答案吗？您好@Reddy，无法通过dateTimeLabelFormats直接实现此功能。我建议您在这里使用普通标签格式化程序，如下所示：我将参考此更新我的答案