如何使用持续时间划分曲线图 [英] How to divide amchart pie chart using time duration

问题描述

我使用的是一张图表饼图。我想用小时、分钟和秒来划分切片。例如，如果总工作时间为8小时，在该用户在工作场所花费5小时30分钟，另一时间在外面。然后我想把这些时间加到一个饼状图上。我不知道怎么加上那个时间。我只添加了基于数字的。请帮帮我。以下是我的代码：

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>   

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

请帮帮我。

推荐答案

饼图不接受时间单位，它们必须是数字。相反，您可以将值以秒为单位表示为每个切片的持续时间，然后使用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);
  }
  // ...
});

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于如何使用持续时间划分曲线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！