[英]Amcharts Candle-Stick balloon text is showing timestamps in wrong format
I am using amcharts to draw the Candle-stick pattern chart. 我正在使用amcharts绘制烛台图案图。 The charts is rendering well but the balloon shows the timestamps in some other format. 图表显示效果很好,但气球以其他格式显示了时间戳。
Actually, The values are in "HH:MM:SS" format but the balloon is showing in some different format. 实际上,这些值采用“ HH:MM:SS”格式,但是气球显示的格式有所不同。 Where as it's showing correctly only in 'Mid:' (ie 14:23:49 ). 仅在“中间:”(即14:23:49 )中正确显示的位置 。
Here is my code : 这是我的代码:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"titles": [{
"text": "amCharts Box Plot Example",
"size": 15
}],
"graphs": [{
"type": "candlestick",
"balloonText": "High: [[high]]\n Open: [[open]]\n Mid: [[mid]]\n Close: [[close]]\nLow: [[low]]",
"highField": "high",
"openField": "open",
"closeField": "close",
"valueField": "close",
"lowField": "low",
"fillColors": "#ffffff",
"lineColor": "blue",
"lineAlpha": 1,
"fillAlphas": 0.9,
"columnWidth": 0.4
}, {
"type": "column",
"columnWidth": 0.2,
"valueField": "high",
"openField": "high",
"lineColor": "blue",
"lineThickness": 3,
"showBalloon": false,
"clustered": false
}, {
"type": "column",
"columnWidth": 0.2,
"valueField": "low",
"openField": "low",
"lineColor": "blue",
"lineThickness": 3,
"showBalloon": false,
"clustered": false
}, {
"type": "column",
"columnWidth": 0.4,
"valueField": "mid",
"openField": "mid",
"lineColor": "orange",
"lineThickness": 3,
"showBalloon": false,
"clustered": false
}
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "exp",
"categoryAxis": {
"title": "Experiment No.",
"gridPosition": "start",
"tickPosition": "start",
"tickLength": 10,
"axisAlpha": 0.7,
"gridAlpha": 0
},
"dataDateFormat": "HH:NN:SS",
//"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"position": "left",
"title": "Time of the Day",
"type": "date",
// "minimumDate": minDateStr,
// "maximumDate": maxDateStr,
"markPeriodChange": false,
"autoGridCount": false,
"gridCount": 7,
"minPeriod": "ss",
}
],
and below is the dataProvider: 下面是dataProvider:
"dataProvider": [{
"exp": 1,
"high": "07:54:00",
"open": "07:45:00",
"mid": "05:23:49",
"close":"04:48:37",
"low": "03:44:57",
"interimSLA": "12:30:00",
"targetedSLA": "08:00:00",
}, {
"exp": 2,
"high": "09:54:00",
"open": "08:10:00",
"mid": "05:23:49",
"close":"04:48:37",
"low": "03:44:57",
"interimSLA": "12:30:00",
"targetedSLA": "08:00:00",
}, {
"exp": 3,
"high": "17:54:00",
"open": "15:20:00",
"mid": "14:23:49",
"close":"12:48:37",
"low": "11:44:57",
"interimSLA": "12:30:00",
"targetedSLA": "08:00:00",
}, {
"exp": 4,
"high": "11:54:00",
"open": "08:10:00",
"mid": "05:23:49",
"close":"04:48:37",
"low": "02:44:57",
"interimSLA": "12:30:00",
"targetedSLA": "08:00:00",
}, {
"exp": 5,
"high": "15:54:00",
"open": "12:50:00",
"mid": "05:23:49",
"close":"04:48:37",
"low": "03:44:57",
"interimSLA": "12:30:00",
"targetedSLA": "08:00:00",
}]
Not sure why it's not showing in given format for all. 不知道为什么它不能全部显示给定格式。 Do I need to format them explicitly? 我需要明确格式化它们吗? Any suggestions would highly be appreciated. 任何建议将不胜感激。
Normally you'd set dateFormat
in your graph object to the desired output format ( HH:NN:SS
in this case) and it will work, however it doesn't seem to impact values other than [[open]]
and [[value]]
. 通常,您可以将图形对象中的dateFormat
设置为所需的输出格式(在这种情况下为HH:NN:SS
),它将起作用,但是它似乎不会影响[[open]]
和[[value]]
。 Your only option in this case is to use a balloonFunction
and format them by hand. 在这种情况下,您唯一的选择是使用balloonFunction
并手动格式化它们。
Here's a basic demo that just returns the direct string values from your data without reformatting: 这是一个基本演示,仅从数据中返回直接字符串值,而无需重新格式化:
var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "light", "titles": [{ "text": "amCharts Box Plot Example", "size": 15 }], "graphs": [{ "type": "candlestick", "balloonText": "High: [[high]]\\n Open: [[open]]\\n Mid: [[mid]]\\n Close: [[close]]\\nLow: [[low]]", "highField": "high", "balloonFunction": function(graphDataItem) { var dataItem = graphDataItem.dataContext; return "High: " + dataItem.high + "<br>Open: " + dataItem.open + "<br>Mid: " + dataItem.mid + "<br>Close: " + dataItem.close + "<br>Low: " + dataItem.low }, //"dateFormat": "HH:NN:SS", //does not work with all fields "openField": "open", "closeField": "close", "valueField": "close", "lowField": "low", "fillColors": "#ffffff", "lineColor": "blue", "lineAlpha": 1, "fillAlphas": 0.9, "columnWidth": 0.4 }, { "type": "column", "columnWidth": 0.2, "valueField": "high", "openField": "high", "lineColor": "blue", "lineThickness": 3, "showBalloon": false, "clustered": false }, { "type": "column", "columnWidth": 0.2, "valueField": "low", "openField": "low", "lineColor": "blue", "lineThickness": 3, "showBalloon": false, "clustered": false }, { "type": "column", "columnWidth": 0.4, "valueField": "mid", "openField": "mid", "lineColor": "orange", "lineThickness": 3, "showBalloon": false, "clustered": false }], "chartCursor": { "valueLineEnabled": true, "valueLineBalloonEnabled": true }, "categoryField": "exp", "categoryAxis": { "title": "Experiment No.", "gridPosition": "start", "tickPosition": "start", "tickLength": 10, "axisAlpha": 0.7, "gridAlpha": 0 }, "dataDateFormat": "HH:NN:SS", "dataProvider": [{ "exp": 1, "high": "07:54:00", "open": "07:45:00", "mid": "05:23:49", "close": "04:48:37", "low": "03:44:57", "interimSLA": "12:30:00", "targetedSLA": "08:00:00", }, { "exp": 2, "high": "09:54:00", "open": "08:10:00", "mid": "05:23:49", "close": "04:48:37", "low": "03:44:57", "interimSLA": "12:30:00", "targetedSLA": "08:00:00", }, { "exp": 3, "high": "17:54:00", "open": "15:20:00", "mid": "14:23:49", "close": "12:48:37", "low": "11:44:57", "interimSLA": "12:30:00", "targetedSLA": "08:00:00", }, { "exp": 4, "high": "11:54:00", "open": "08:10:00", "mid": "05:23:49", "close": "04:48:37", "low": "02:44:57", "interimSLA": "12:30:00", "targetedSLA": "08:00:00", }, { "exp": 5, "high": "15:54:00", "open": "12:50:00", "mid": "05:23:49", "close": "04:48:37", "low": "03:44:57", "interimSLA": "12:30:00", "targetedSLA": "08:00:00", }], "valueAxes": [{ "id": "v1", "position": "left", "title": "Time of the Day", "type": "date", // "minimumDate": minDateStr, // "maximumDate": maxDateStr, "markPeriodChange": false, "autoGridCount": false, "gridCount": 7, "minPeriod": "ss" } ], });
html, body { width: 100%; height: 100%; margin: 0px; } #chartdiv { width: 100%; height: 100%; }
<script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/serial.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.