代码之家 › 专栏 › 技术社区 › Anuradha

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

amcharts

Anuradha · 技术社区 · 7 年前

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

在上述代码中,我在“升”字段中添加了数字。我想在这里增加时间。

请帮帮我。

1 回复 | 直到 7 年前

xorspark 7 年前

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