Question

Hi highrts社区！

在我的角度4项目中，我试图仅在我的水平条形图的工具提示中禁用日期和月份，只是让小时分钟和secondes出现，如果有人知道如何制作它？

我尝试使用属性dateTimeLabelFormats但没有成功

提前致谢

horizontalbar.ts：

constructor(public userService3: UserService3) {

  const timeZoneOffset = new Date().getTimezoneOffset();

  const Highcharts = require('highcharts');

    Highcharts.setOptions({
  global: {
   timezoneOffset: timeZoneOffset
  },
      });


       this.options = {
        title : { text : '' },
        chart: {  type: 'area',
                    label: {
                      format: '{data: %B}'
                    }},
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { type: 'datetime',
                //  day: '%H',
                startOnTick: false,
                endOnTick: false,
                minTickInterval: 24 * 3600 * 1000,
                tickInterval: 36e5 * 2, // two hours
                },
        yAxis: { min: 0,
          max: 100,
           labels: {
              enabled: true
          },
             title: {
             text: null
           },
        },
        plotOptions: {
          series: {
              color: '#648e59',
              fillOpacity: 0.8,
              fillColor: '#648e59',
              pointInterval: 36e5 * 2 // two hours
                  }
        },
        series: [{
          name: 'Taux de fonctionnement',
          data: [],
        }]
       };
   }
  saveInstance(chartInstance) {
    this.chart = chartInstance;
    console.log(chartInstance);
}

  public ngOnInit () {
  this.dataSubscription = this.userService3.getData().subscribe((data) 
 => {
  this.options.series[0].data = data.data.operating_details;
  console.log(data);
   });
}
   ngOnDestroy() {
  if (this.dataSubscription){
 this.dataSubscription.unsubscribe();
 }
   }
     public hideDem2(): void {
   this.hideMeup = !this.hideMeup;
    this.hideMeup = !this.hideMeup;

    this.hideItup = !this.hideItup;
        if (this.hideItup) {
          this.opened.emit(true);
        } else {
          this.closed.emit(false);
        }
           console.log(this.hideItup);
      }

   }

horizontalbar.html：

      <chart [options]="options" (load)="saveInstance($event.context)">
      <!--    <point (select)="onPointSelect($event)"></point> -->
      </chart>

Answer 1

如果通过＆＃34;在我的水平条形图中打勾，＆＃34;您的意思是轴标签，您可以将以下内容添加到xAxis选项中：

labels: {
    formatter: function () {
        return Highcharts.dateFormat('%H:%M:%S', this.value);
    },
},

这应该仅以H:M:S格式返回轴标签的小时，分钟和秒。

有关Highcharts.dateFormat()的更多信息，请访问：http://api.highcharts.com/highcharts/Highcharts.numberFormat。

Highcharts.dateFormat()函数使用PHP的strftime格式规则（请参阅http://php.net/manual/en/function.strftime.php）。

我希望这些信息对您有所帮助。

更新：根据埃米尔的评论，相关标题是图表的工具提示。在这种情况下，您需要修改的内容如下：

tooltip: {
    formatter: function () {
        return Highcharts.dateFormat('%H:%M:%S', this.x);
    },
},

请参阅Highcharts文档中的以下资源：

在Highcharts

1 个答案: