Question

我正在使用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>

在上面的代码中我在升字段中添加了数字。我想增加时间。

请帮帮我。

Answer 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);
  }
  // ...
});

＆＃13;

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
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: