如何使用持续时间划分amchart饼图答案

【问题标题】：How to divide amchart pie chart using time duration如何使用持续时间划分amchart饼图
【发布时间】：2023-03-25 20:11:02
【问题描述】：

我正在使用 amchart 饼图。我想使用小时、分钟和秒来划分切片。例如，如果总工作时间为 8 小时，则该用户在工作地点花费 5 小时 30 分钟，而另一时间则在外面。然后我想根据 amchart 饼图添加这些时间。我不知道如何添加那个时间。我只添加了数字。请帮我。这是我的代码：

var chart;
var a = 1.1;
var chart = AmCharts.makeChart("chartdiv", {
    "type" : "pie",
    "allLabels" : [{
            "text" : "05:24",
            "align" : "center",
            "bold" : true,
            "y" : 230
        }, {
            "text" : "Clocked In",
            "align" : "center",
            "bold" : false,
            "y" : 250
        }
    ],
    "dataProvider" : [{
            "country" : a + "-in Visits",
            "litres" : 11
        }, {
            "country" : "Driving",
            "litres" : 20
        }
    ],
    "valueField" : "litres",
    "titleField" : "country",
    "labelText" : "[[title]]",
    "radius" : "30%",
    "innerRadius" : "60%",
    "marginTop" : 0,
    "marginBottom" : 0
});


<div id="chartdiv"></div>

在上面的代码中，我在升字段中添加了数字。那里我想补充时间。

请帮助我。

【问题讨论】：

标签： amcharts

【解决方案1】：

饼图不接受时间单位，它们必须是数字。您可以改为以秒为单位将您的值表示为每个切片的持续时间，然后使用 balloonFunction 和 labelFunction 将这些值重新格式化为时间戳，如果您想以该格式显示它们。

function secondsToTimestamp(totalSeconds) {
  var hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  var minutes = Math.floor(totalSeconds / 60);
  var seconds = totalSeconds % 60;
  return ("0" + hours).slice(-2) + ":" +
         ("0" + minutes).slice(-2) + ":" +
         ("0" + seconds).slice(-2);
}

// ...
AmCharts.makeChart("...", {
  // ...
  "balloonFunction": function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
 "labelFunction": function(graphDataItem, valueText) {    
        return secondsToTimestamp(+valueText);
  }
  // ...
});

function secondsToTimestamp(totalSeconds) {
  var hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  var minutes = Math.floor(totalSeconds / 60);
  var seconds = totalSeconds % 60;
  return ("0" + hours).slice(-2) + ":" +
    ("0" + minutes).slice(-2) + ":" +
    ("0" + seconds).slice(-2);
}

var chart;
var a = 1.1;
var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "allLabels": [{
    "text": "05:24",
    "align": "center",
    "bold": true,
    "y": 230
  }, {
    "text": "Clocked In",
    "align": "center",
    "bold": false,
    "y": 250
  }],
  "dataProvider": [{
    "text": a + "-in Visits",
    "seconds": 20745
  }, {
    "text": "Driving",
    "seconds": 29475
  }],
  "valueField": "seconds",
  "titleField": "text",
  "balloonFunction": function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
  labelFunction: function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
  "radius": "30%",
  "innerRadius": "60%",
  "marginTop": 0,
  "marginBottom": 0
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>

【讨论】：