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