javascript - 如何使用 highcharts 在饼图标签中正确显示时间数据的刻度？

Question

我会尽量简短，我正在尝试渲染饼图并设置标签来显示总时间，我得到了刻度，我想在饼图中显示它。

据我所知，饼图没有轴，我找到的所有替代方案都是在 X 或 Y 轴上配置的。像这样的事情:

xAxis: {
    type: 'datetime', //y-axis will be in milliseconds
},

在工具提示中:

formatter: function () {
    return '<b>' + this.series.name + '</b><br/>' +
    Highcharts.dateFormat('%H:%M:%S', new Date(this.y));
},

这是我的文本代码

        Highcharts.chart('container', {
                        chart: {
                            type: 'pie',
                            options3d: {
                                enabled: true,
                                alpha: 45,
                                beta: 0
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        tooltip: {
                            formatter: function () {
                                return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%H:%M:%S', new Date(this.y));
                            },
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            data: [
                                    [ 'T1',30600000000  ],
                            ]
                        }]
                    });

我尝试过一些在线刻度转换器，它们都将“30600000000”转换为 00:51:00 (HH:mm:ss)，但我的标签中显示的是 04:00:00。

这是一个 fiddle https://jsfiddle.net/lvevano/gp80ckfr/2/我做错了什么？

Answer 1

您的情况有所不同，因为您用于 Date 的构造函数接受 EPOCH 日期，并且您将刻度传递给它。您需要将其转换为 EPOCH，以便 javascript 可以理解它。

var yourDate = new Date(30600000000); // Your date
console.log(yourDate);
var convertedToEpoch = (yourDate.getTime() - 621355968000000000) / 10000;
console.log(new Date(convertedToEpoch));

使用新方法更新了您的 fiddle ，将刻度转换为纪元。

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45,
      beta: 0
    }
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M:%S', new Date(convertTicksToEpoc(this.y)));
    },
    shared: true,
    useHTML: true
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },
  series: [{
    type: 'pie',
    data: [
      ['T1', 30600000000],
      ['T2', 20400000000],
    ]
  }]
});

function convertTicksToEpoc(ticks) {
  return (ticks - 621355968000000000) / 10000;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

您可以通过此链接 https://devkimchi.com/2018/11/04/converting-tick-or-epoch-to-timestamp-in-logic-app/ 了解这两个日期