在 AmCharts 中将数据从秒更改为 minutes/hours/days

Change data from second to minutes/hours/days in AmCharts


我对 AmCharts 插件有一些问题。我有 JSON'a 给我打电话。我想以分钟/小时/天为单位转动第二个(取决于有多少)。有一些简单的方法吗?例如,它看起来像这样:

var dataProvider = [
{title:"Test_1", value:"89"},
{title:"Test_2", value:"43"}
];
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "dark",
  "dateFormats": 'DD:JJ:NN:SS',
  "dataProvider": dataProvider,
  "titleField": "title",
  "valueField": "value",
  "labelRadius": 5,
  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",
  "export": {
    "enabled": true
  },
  "legend":{
    "enabled": true,
    "align": "center",
    "color": "white",
    "labelText" : "[[title]]"
  }
});

JSFIDDLE

在 dataProvider 中,我有 'value' 保持秒数。这是一个简单的方法,可以在另一个时间单位将它们转给我并显示在图表上?

您可以使用 balloonFunction 来定义您自己的格式化气球的自定义函数。如果设置图表传递关于被悬停的切片的全部信息,并期望它是 return 一个要显示在气球中的字符串。

同样,您可以使用 labelFunction 来格式化标签。

这是您的图表,其中 balloonFunction 应用于将秒值格式化为时间:

var dataProvider = [
  { title: "Test_1", value: "89" },
  { title: "Test_2", value: "43" }
];
var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "dark",
  "dateFormats": 'DD:JJ:NN:SS',
  "dataProvider": dataProvider,
  "titleField": "title",
  "valueField": "value",
  "labelRadius": 5,
  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",
  "balloonFunction": function(item) {

    function formatTime(seconds) {
      var sec_num = parseInt(seconds, 10);
      var hours = Math.floor(sec_num / 3600);
      var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
      var seconds = sec_num - (hours * 3600) - (minutes * 60);

      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var time = hours + ':' + minutes + ':' + seconds;
      return time;
    }

    return item.title + ": " + formatTime(item.value);
  },
  "export": {
    "enabled": true
  },
  "legend": {
    "enabled": true,
    "align": "center",
    "color": "white",
    "labelText": "[[title]]"
  }
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 250px;"></div>