javascript - Amcharts Candle-Stick 气球文本以错误的格式显示时间戳
问题描述
我正在使用 amcharts 来绘制烛台模式图表。图表呈现良好,但气球以其他格式显示时间戳。
实际上,这些值采用“HH:MM:SS”格式,但气球以某种不同的格式显示。它仅在“Mid:”(即14:23:49)中正确显示。
这是我的代码:
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",
}
],
以下是数据提供者:
"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",
}]
不知道为什么它没有以给定的格式显示给所有人。我需要明确格式化它们吗?任何建议将不胜感激。
解决方案
通常,您会dateFormat
在图形对象中将其设置为所需的输出格式(HH:NN:SS
在这种情况下),它会起作用,但它似乎不会影响除[[open]]
and以外的值[[value]]
。在这种情况下,您唯一的选择是使用 aballoonFunction
并手动格式化它们。
这是一个基本演示,它只返回数据中的直接字符串值,无需重新格式化:
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>
推荐阅读
- vue.js - 使用组件通过 CDN 读取条码
- reporting-services - SSRS 电子邮件订阅的条件页脚
- r - 如何在 R 中构建这个 JSON 文件?
- java - 如何在 REST API URL 路径中处理特殊字符(如管道(|))而不在 java 中发送编码值?
- u-boot - mdio总线上的持续通信正常吗?
- javascript - 从用户键入的代码 JavaScript 中获取输出
- c# - Xamarin Collectionview 绑定不起作用
- amazon-web-services - 单个账户的 AWS Codepipeline 限制
- git - 无法使用 git-format-patch 和 git-am 重播 Linux 内核的提交
- javascript - HTML输入字段数据类型问题