在 AmCharts 中将数据从秒更改为分钟/小时/天

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

本文关键字：分钟 小时 AmCharts 数据      更新时间：2023-09-26


我对 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]]"
  }
});

吉斯菲德尔

在数据提供程序中，我有"值"，它保留了几秒钟。这是一种简单的方法，可以在另一个时间单位将它们转向我并显示在图表上？

您可以使用

balloonFunction来定义自己的自定义函数来设置气球的格式。如果设置图表会传递有关切片悬停的全部信息，并期望它返回一个字符串以显示在气球中。

同样，您可以使用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>

相关文章：