代码之家  ›  专栏  ›  技术社区  ›  kockburn

如何在开始和结束时自定义xAxis标签?

  •  0
  • kockburn  · 技术社区  · 7 年前

    如何在开始和结束时自定义xAxis标签?

    Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'PH Values'
      },
      subtitle: {
        text: 'some subtitle'
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
          month: '%e. %b',
          year: '%b'
        },
        title: {
          text: 'Date'
        },
        plotBands: [{
          "from": 694004580000,
          "to": 694005180000,
          "color": "rgba(68, 170, 213, 0.1)",
          "label": {
            "text": "Snack",
            "style": {
              "color": "#606060"
            }
          }
        }]
      },
      yAxis: {
        title: {
          text: 'PH Level'
        },
        min: 0
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
      },
    
      plotOptions: {
        spline: {
          marker: {
            enabled: true
          }
        }
      },
    
      colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
    
      // Define the data points. All series have a dummy year
      // of 1970/71 in order to be compared on the same x axis. Note
      // that in JavaScript, months start at 0 for January, 1 for February etc.
      series: [{
        name: "PH Values",
        data: [
          [694004400000, 5.03],
          [694004410000, 5.08],
          [694004430000, 4.83],
          [694004460000, 4.93],
          [694004500000, 4.98],
          [694004550000, 4.83],
          [694004610000, 4.08],
          [694004680000, 3.93],
          [694004760000, 3.78],
          [694004850000, 3.88],
          [694004950000, 4.03],
          [694005060000, 4.08],
          [694005180000, 4.18],
          [694005310000, 4.43],
          [694005450000, 4.63],
          [694005600000, 4.83],
          [694005760000, 4.98],
          [694005930000, 4.78],
          [694006110000, 4.88],
          [694006300000, 5.11],
          [694006500000, 4.53],
          [694006720000, 4.22],
          [694006960000, 4.02],
          [694007210000, 3.95],
          [694007470000, 3.82],
          [694007740000, 3.71],
          [694008020000, 3.63],
          [694008310000, 3.53],
          [694008610000, 3.58],
          [694008920000, 3.82],
          [694009240000, 3.89],
          [694009570000, 4.01],
          [694009910000, 4.09],
          [694010260000, 4.09],
          [694010620000, 4.38],
          [694010990000, 4.48],
          [694011370000, 4.78],
          [694011760000, 4.88],
          [694012160000, 4.98],
          [694012570000, 4.93],
          [694012990000, 4.48],
          [694013420000, 3.93],
          [694013860000, 4.01],
          [694014310000, 4.08],
          [694014770000, 4.38],
          [694015240000, 4.33],
          [694015720000, 3.93],
          [694016210000, 3.81],
          [694016710000, 3.73]
        ]
      }]
    });
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container"></div>

    我注意到有一个 formatter option for labels

    labels: {
       formatter: ()=>{
           if(this.isFirst || this.isLast){
               return '%e. %b'
           }
           return this.value;
       }
    }
    

    但显然不行。

    1 回复  |  直到 7 年前
        1
  •  1
  •   ewolden    7 年前

    你很接近。你只需要使用 dateFormat 用于解释时间的图表函数。你可以这样把它放在墙上 xAxis :

    labels: {
      formatter: function() {
        if(this.isFirst || this.isLast){
            return Highcharts.dateFormat('%e. %b', this.value)
        }
          return Highcharts.dateFormat('%H:%M', this.value)
      }
    },
    

    此外,如果要在数据开始/结束之前/之后显示刻度,则需要在 X轴 :

    showFirstlabel: true,
    startOnTick: true,
    showLastLabel: true,
    endOnTick: true,
    

    工作示例:

    Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'PH Values'
      },
      subtitle: {
        text: 'some subtitle'
      },
      xAxis: {
        showFirstlabel: true,
        startOnTick: true,
        showLastLabel: true,
        endOnTick: true,
        labels: {
          formatter: function() {
          if(this.isFirst || this.isLast){
          	return Highcharts.dateFormat('%e. %b', this.value)
          }
            return Highcharts.dateFormat('%H:%M', this.value)
          }
        },
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
          month: '%e. %b',
          year: '%b'
        },
        title: {
          text: 'Date'
        },
        plotBands: [{
          "from": 694004580000,
          "to": 694005180000,
          "color": "rgba(68, 170, 213, 0.1)",
          "label": {
            "text": "Snack",
            "style": {
              "color": "#606060"
            }
          }
        }]
      },
      yAxis: {
        title: {
          text: 'PH Level'
        },
        min: 0
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
      },
    
      plotOptions: {
        spline: {
          marker: {
            enabled: true
          }
        }
      },
    
      colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
    
      // Define the data points. All series have a dummy year
      // of 1970/71 in order to be compared on the same x axis. Note
      // that in JavaScript, months start at 0 for January, 1 for February etc.
      series: [{
        name: "PH Values",
        data: [
          [694004400000, 5.03],
          [694004410000, 5.08],
          [694004430000, 4.83],
          [694004460000, 4.93],
          [694004500000, 4.98],
          [694004550000, 4.83],
          [694004610000, 4.08],
          [694004680000, 3.93],
          [694004760000, 3.78],
          [694004850000, 3.88],
          [694004950000, 4.03],
          [694005060000, 4.08],
          [694005180000, 4.18],
          [694005310000, 4.43],
          [694005450000, 4.63],
          [694005600000, 4.83],
          [694005760000, 4.98],
          [694005930000, 4.78],
          [694006110000, 4.88],
          [694006300000, 5.11],
          [694006500000, 4.53],
          [694006720000, 4.22],
          [694006960000, 4.02],
          [694007210000, 3.95],
          [694007470000, 3.82],
          [694007740000, 3.71],
          [694008020000, 3.63],
          [694008310000, 3.53],
          [694008610000, 3.58],
          [694008920000, 3.82],
          [694009240000, 3.89],
          [694009570000, 4.01],
          [694009910000, 4.09],
          [694010260000, 4.09],
          [694010620000, 4.38],
          [694010990000, 4.48],
          [694011370000, 4.78],
          [694011760000, 4.88],
          [694012160000, 4.98],
          [694012570000, 4.93],
          [694012990000, 4.48],
          [694013420000, 3.93],
          [694013860000, 4.01],
          [694014310000, 4.08],
          [694014770000, 4.38],
          [694015240000, 4.33],
          [694015720000, 3.93],
          [694016210000, 3.81],
          [694016710000, 3.73]
        ]
      }]
    });
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container"></div>
    推荐文章