我一直试图格式化startTime
&的值。 endTime
字段随着时间的推移。我希望格式类似于 05:00 或 17:10 ,以便在每个序列的顶部添加自定义文字。
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "light",
"type": "serial",
"dataDateFormat": "YYYY-MM-DD",
"dataProvider": [ {
"name": "111",
"startTime": 7.00,
"endTime": 17.0,
"value1": "2016-05-03",
"value2": "2016-05-05",
"color": "#FF3F33",
}, {
"name": "220",
"startTime": 18.17,
"endTime": 16.18,
"value1": "2016-03-15",
"value2": "2016-03-20",
"color": "#FFB134",
}, {
"name": "109",
"startTime": 17.0,
"endTime": 18.40,
"value1": "2016-01-20",
"value2": "2016-01-22",
"color": "#F9FF34",
}, {
"name": "108",
"startTime": 19,
"endTime": 21,
"value1": "2016-01-20",
"value2": "2016-01-21",
"color": "#36DB44",
}, {
"name": "107",
"startTime": 14.50,
"endTime": 16.30,
"value1": "2016-01-20",
"value2": "2016-01-22",
"color": "#9DC481",
}, {
"name": "106",
"startTime": 5.50,
"endTime": 9.15,
"value1": "2016-02-02",
"value2": "2016-02-05",
"color": "#D66C6E",
}, {
"name": "105",
"startTime": 6,
"endTime": 8,
"value1": "2016-01-13",
"value2": "2016-01-21",
"color": "#0D8ECF",
}, {
"name": "104",
"startTime": 5,
"endTime": 8,
"value1": "2016-01-28",
"value2": "2016-01-31",
"color": "#FF3F33",
}, {
"name": "103",
"startTime": 5.30,
"endTime": 7.30,
"value1": "2016-01-27",
"value2": "2016-01-31",
"color": "#FFB134",
}, {
"name": "102",
"startTime": 9,
"endTime": 11,
"value1": "2016-01-20",
"value2": "2016-01-25",
"color": "#F9FF34",
}, {
"name": "101",
"startTime": 10.0,
"endTime": 11,
"value1": "2016-01-22",
"value2": "2016-01-23",
"color": "#36DB44",
} ],
"valueAxes": [ {
"axisAlpha": 0,
"gridAlpha": 0.1
} ],
"startDuration": 1,
"graphs": [ {
//"valueField": "value",
"balloonText": "<b>Flight Number [[category]]</b><br>Schedule start date: [[value1]]<br>Schedule end date: [[value2]]<br> Departure Time: [[startTime]]<br> Arrival Time: [[endTime]]",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime",
} ],
"chartCursor": {
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true
},
"rotate": true,
"columnWidth": 1,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
},
"export": {
"enabled": true
},
"valueScrollbar": {
}
} );
我试图学习一些自定义技巧,如果你有任何推荐链接,请粘贴它。
答案 0 :(得分:0)
您可以使用balloonFunction
。它允许设置一个自定义函数,根据您的逻辑格式化气球内容,包括将专有值格式化为时间:
"graphs": [ {
//"valueField": "value",
"balloonFunction": function( item ) {
function formatTime( val ) {
var minutes = Math.round( val * 60 );
var hours = Math.floor( minutes / 60 );
minutes = minutes - hours * 60;
var str = String( hours );
str += ":" + ( minutes > 9 ? minutes : "0" + minutes );
return str;
}
var text = "<b>Flight Number " + item.category +
"</b><br>Schedule start date: " + item.dataContext.value1 +
"<br>Schedule end date: " + item.dataContext.value1 +
"<br> Departure Time: " + formatTime( item.dataContext.startTime ) +
"<br> Arrival Time: " + formatTime( item.dataContext.endTime );
return text;
},
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime",
} ]
要直接在条形图上显示一些自定义信息,请使用图表设置labelText
和labelPosition
。即:
"labelText": "[[customText]]",
"labelPosition": "middle"
&#34; [customText]]&#34;将引用数据中的字段并在条形图上显示其内容(如果存在)。