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

时间:2016-01-25 13:59:12

标签: javascript amcharts


我对AmCharts插件有一些问题。我有JSON'一个叫我一秒钟的人。我想以分钟/小时/天为单位转换秒数(取决于有多少)。有一些简单的方法吗?例如,它看起来像这样:

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中,我有'值'这保持了几秒钟。这是一个简单的方法,可以在另一个时间单位将它们转换为我并显示在图表上?

1 个答案:

答案 0 :(得分:1)

您可以使用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]]"
  }
});
&#13;
<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>
&#13;
&#13;
&#13;